pedram_ns
دوشنبه 29 اسفند 1390, 12:45 عصر
با سلام
من با کدهای زیر یک تب ساده ساختم ولی نمی دونم چرا عکس بگراند تب ها رو نمی تونم تغییر بدم. لطفا اگر مشکلی در کدها هست راهنمایی بفرمایید.
من می خوام وقتی روی یکی از تب ها کلیک شد بک گراند تب قبلی مخفی بشه و برای تب جدید نمایش داده بشه
فایل نمونه هم هست.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<script type="text/javascript" language="javascript">
function tab(x) {
document.getElementById('tab1').style.color = '#000';
document.getElementById('tab2').style.color = '#000';
document.getElementById('tab3').style.color = '#000';
document.getElementById('tab4').style.color = '#000';
document.getElementById('tab' + x).style.color = 'red';
document.getElementById('tab1').style.background = "background-image: url('')";
document.getElementById('tab2').style.background = "background-image: url('')";
document.getElementById('tab3').style.background = "background-image: url('')";
document.getElementById('tab4').style.background = "background-image: url('')";
document.getElementById('tab' + x).style.background = "background-image: url('tab.gif') no-repeat";
}
</script>
</head>
<body>
<div style="height: 45px; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #808080;">
<div onclick="tab('1')" style="width: 163px; height: 45px; float: right; background-image: url('tab.gif'); background-repeat: no-repeat; padding-top: 20px; text-align: center; font-family: Tahoma; font-size: 9pt; color: red;"
id="tab1">
tab 1</div>
<div onclick="tab('2')" style="width: 163px; height: 45px; float: right; background-repeat: no-repeat; padding-top: 20px; text-align: center; font-family: Tahoma; font-size: 9pt;"
id="tab2">
tab 2</div>
<div onclick="tab('3')" style="width: 163px; height: 45px; float: right; background-repeat: no-repeat; padding-top: 20px; text-align: center; font-family: Tahoma; font-size: 9pt;"
id="tab3">
tab 3</div>
<div onclick="tab('4')" style="width: 163px; height: 45px; float: right; background-repeat: no-repeat; padding-top: 20px; text-align: center; font-family: Tahoma; font-size: 9pt;"
id="tab4">
tab 4</div>
</div>
</body>
</html>
من با کدهای زیر یک تب ساده ساختم ولی نمی دونم چرا عکس بگراند تب ها رو نمی تونم تغییر بدم. لطفا اگر مشکلی در کدها هست راهنمایی بفرمایید.
من می خوام وقتی روی یکی از تب ها کلیک شد بک گراند تب قبلی مخفی بشه و برای تب جدید نمایش داده بشه
فایل نمونه هم هست.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<script type="text/javascript" language="javascript">
function tab(x) {
document.getElementById('tab1').style.color = '#000';
document.getElementById('tab2').style.color = '#000';
document.getElementById('tab3').style.color = '#000';
document.getElementById('tab4').style.color = '#000';
document.getElementById('tab' + x).style.color = 'red';
document.getElementById('tab1').style.background = "background-image: url('')";
document.getElementById('tab2').style.background = "background-image: url('')";
document.getElementById('tab3').style.background = "background-image: url('')";
document.getElementById('tab4').style.background = "background-image: url('')";
document.getElementById('tab' + x).style.background = "background-image: url('tab.gif') no-repeat";
}
</script>
</head>
<body>
<div style="height: 45px; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #808080;">
<div onclick="tab('1')" style="width: 163px; height: 45px; float: right; background-image: url('tab.gif'); background-repeat: no-repeat; padding-top: 20px; text-align: center; font-family: Tahoma; font-size: 9pt; color: red;"
id="tab1">
tab 1</div>
<div onclick="tab('2')" style="width: 163px; height: 45px; float: right; background-repeat: no-repeat; padding-top: 20px; text-align: center; font-family: Tahoma; font-size: 9pt;"
id="tab2">
tab 2</div>
<div onclick="tab('3')" style="width: 163px; height: 45px; float: right; background-repeat: no-repeat; padding-top: 20px; text-align: center; font-family: Tahoma; font-size: 9pt;"
id="tab3">
tab 3</div>
<div onclick="tab('4')" style="width: 163px; height: 45px; float: right; background-repeat: no-repeat; padding-top: 20px; text-align: center; font-family: Tahoma; font-size: 9pt;"
id="tab4">
tab 4</div>
</div>
</body>
</html>