请教：选项卡

Question

五个导航，默认的第一个有一个背景图片，字体为白色加粗显示，（其他为一般显示）  每一个都带空链接，当点击第二个的时候第一个变为一般显示，第二个变为带有背景、字体为白色加粗显示。          谢谢

Answer 1

一般可以通过修改 className 来实现

Answer 2

用OnMouseOver和OnMouseOut来实现可以不?

Answer 3

<style type="text/css">
.label1 {
     background-image: url(images/menu1.jpg);
     border-top-width: 1px;
     border-right-width: 1px;
     border-bottom-width: 0px;
     border-left-width: 1px;
     border-top-style: solid;
     border-bottom-style: none;
     border-left-style: solid;
     border-top-color: #778A98;
     border-left-color: #778A98;
}
.label2 {
     background-image: url(images/menu2.jpg);
     border-top-width: 1px;
     border-right-width: 0px;
     border-bottom-width: 1px;
     border-left-width: 1px;
     border-top-style: solid;
     border-right-style: none;
     border-bottom-style: solid;
     border-left-style: solid;
     border-top-color: #778A98;
     border-bottom-color: #778A98;
     border-left-color: #778A98;
}
.label3 {
     border-bottom-width: 1px;
     border-bottom-style: solid;
     border-bottom-color: #778A98;
     border-left-width: 1px;
     border-left-style: solid;
     border-left-color: #778A98;
}
.font3{
     font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;
     color: #cc6633;
     text-decoration: none;
     font-weight: bold;
}
.table1 {
     border-top-width: 0px;
     border-right-width: 1px;
     border-bottom-width: 1px;
     border-left-width: 1px;
     border-top-style: none;
     border-right-style: solid;
     border-bottom-style: solid;
     border-left-style: solid;
     border-right-color: #778A98;
     border-bottom-color: #778A98;
     border-left-color: #778A98;
}
.font4{
     font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;
     text-decoration: none;
     color: #18397c;
}
</style>
<script>
var old_obj="0";
function label_change(l)
{
     document.getElementById(old_obj).className="font4";
     document.getElementById("td_"+old_obj+"").className="label2";
     document.getElementById("table_"+old_obj+"").style.display="none";
     document.getElementById(l).className="font3";
     document.getElementById("td_"+l+"").className="label1";
     document.getElementById("table_"+l+"").style.display="";
     old_obj=l;
}
</script>
<table width="800" border="0" cellpadding="0" cellspacing="0"><tr><td width="120" height="30" id="td_0" onclick="label_change(0)" align="center" nowrap class="label1"><a href="javascript:void(0)" id="0" class="font3">tab0</a></td><td width="120" height="30" id="td_1" onclick="label_change(1)" align="center" nowrap class="label2"><a href="javascript:void(0)" id="1" class="font4">tab1</a></td><td width="120" height="30" id="td_2" onclick="label_change(2)" align="center" nowrap class="label2"><a href="javascript:void(0)" id="2" class="font4">tab2</a></td><td width="120" height="30" id="td_3" onclick="label_change(3)" align="center" nowrap class="label2"><a href="javascript:void(0)" id="3" class="font4">tab3</a></td><td width="120" height="30" id="td_4" onclick="label_change(4)" align="center" nowrap class="label2"><a href="javascript:void(0)" id="4" class="font4">tab4</a></td><td width="200" class="label3">&nbsp;</td></tr></table><table width="800"  border="0" cellpadding="5" cellspacing="0" bgcolor="#FFFFFF" class="table1" id="table_0"><tr><td>this is table0</td></tr></table><table width="800" style="display:none;" border="0" cellpadding="5" cellspacing="0" bgcolor="#FFFFFF" class="table1" id="table_1"><tr><td>this is table1</td></tr></table><table width="800" style="display:none;" border="0" cellpadding="5" cellspacing="0" bgcolor="#FFFFFF" class="table1" id="table_2"><tr><td>this is table2</td></tr></table><table width="800" style="display:none;" border="0" cellpadding="5" cellspacing="0" bgcolor="#FFFFFF" class="table1" id="table_3"><tr><td>this is table3</td></tr></table><table width="800" style="display:none;" border="0" cellpadding="5" cellspacing="0" bgcolor="#FFFFFF" class="table1" id="table_4"><tr><td>this is table4</td></tr></table>
menu1.jpg为一般显示的背景
menu2.jpg为被选种标签的背景
字体你可分别设置font3和font4的class