javascript css的tab效果
http://ayaya.iteye.com/blog/149936
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><style type="text/css">a { color:#000000; text-decoration:none;} #header { float:left; width:760px; background:#D3D3D3; font-size:12px; line-height:normal;}#header ul { margin:0; padding:0px; list-style:none;}#header li { float:left; background:#DCE1EF; border:solid 1px #8EA2C2; margin-left:2px; padding:0px;}#header a { display:block; padding:5px 15px 4px;}#header .current { background:#FFFFFF; border-left:solid 1px #8EA2C2; border-top:solid 1px #8EA2C2; border-right:solid 1px #8EA2C2; border-bottom:solid 0px #8EA2C2; }#header .current a{ padding-bottom:5px;}.content { margin-top:2px; width:760px;}.content .contentHeader { background-color:#BCC7E0; border:solid 1px #4B66A5; font-weight:bold; height:24px;}.content .contentMain { border-left:solid 1px #4B66A5; border-top:solid 0px #4B66A5; border-right:solid 1px #4B66A5; border-bottom:solid 1px #4B66A5; height:400px;}tr {background-color:expression((this.sectionRowIndex%2==0)?"#945643":"#fff")}</style><script type="text/javascript">function change_option(number,index){ for (var i = 1; i <= number; i++) { document.getElementById('current' + i).className = ''; document.getElementById('content' + i).style.display = 'none'; } document.getElementById('current' + index).className = 'current'; document.getElementById('content' + index).style.display = 'block';}var varclk=null;var oldcolor=null;function change1(vartr){if(varclk!=null){varclk.style.backgroundColor=oldcolor;varclk.style.color="black";}oldcolor=vartr.style.backgroundColor;vartr.style.backgroundColor='#456';vartr.style.color="white";varclk=vartr;}</script><title>Tab Test</title></head><body><div id="navbar"> <div id="header"> <ul> <li id="current1"><a href="#" onclick="change_option(3,1);">Tab-A</a></li> <li id="current2"><a href="#" onclick="change_option(3,2);">Tab-B</a></li> <li id="current3"><a href="#" onclick="change_option(3,3);">Tab-C</a></li> </ul> </div> <div id="content1" border="0"> <tr onClick="change1(this)"> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> </tr> <tr onClick="change1(this)"> <td>a</td> <td>b</td> <td>c</td> <td>e</td> <td>d</td> </tr> <tr onClick="change1(this)"> <td>a</td> <td>b</td> <td>c</td> <td>e</td> <td>d</td> </tr></table> </div> </div> <div id="content2" style="display:none"> <div style="display:none"> <div class="contentHeader">Tab-C</div> <div class="contentMain"> 第三个选项卡</div> </div></div></body></html>