javascript css的tab效果
<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="#" >Tab-A</a></li> <li id="current2"><a href="#" >Tab-B</a></li> <li id="current3"><a href="#" >Tab-C</a></li></ul> </div> <div id="content1" class="content"> <div class="contentHeader">Tab-A</div> <div class="contentMain"> <table width="760" border="0"><tr > <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td></tr><tr > <td>a</td> <td>b</td> <td>c</td> <td>e</td> <td>d</td></tr> <tr > <td>a</td> <td>b</td> <td>c</td> <td>e</td> <td>d</td></tr></table> </div> </div> <div id="content2" class="content" style="display:none"> <div class="contentHeader">Tab-B</div> <div class="contentMain"> <table width="760" border="0"><tr > <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td></tr><tr > <td>a</td> <td>b</td> <td>c</td> <td>e</td> <td>d</td></tr> <tr > <td>a</td> <td>b</td> <td>c</td> <td>e</td> <td>d</td></tr></table> </div> </div> <div id="content3" class="content" style="display:none"> <div class="contentHeader">Tab-C</div> <div class="contentMain"> <table width="760" border="0"><tr > <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td></tr><tr > <td>a</td> <td>b</td> <td>c</td> <td>e</td> <td>d</td></tr> <tr > <td>a</td> <td>b</td> <td>c</td> <td>e</td> <td>d</td></tr></table></div> </div></div></body></html>
页:
[1]