Tip: you can modify some code before running
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>SetTab</title><script type="text/javascript">Function id () {var ids = ['settab1', 'settab2', 'settab3'] for (I = 0; I<ids.length;i++){document.getElementById(ids[i]).onmouseover=function(){tab(this);}}function tab(name){var tab_li=name.getElementsByTagName('ul')[0].getElementsByTagName('li');for(i=0;i<tab_li.length;i++){tab_li[i].index=i;tab_li[i].onclick=function(){ //鼠标事件setTab(this.index,tab_li,name);}}function setTab(num,li,box){var settab_con=box.getElementsByTagName('div'); for(i=0;i<tab_li.length;i++){li[i].className="";settab_con[i].className="";} li[num].className="tab_li";settab_con[num].className="settab_div";}}}window.onload=function(){id();}</script><style>* { margin:0; padding:0; }ul,li { list-style:none; } /*clear*/.clear{zoom:1;clear:both;}.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;}.clearfix {zoom:1;display: inline-block;_height:1px;} /*setTab start*/.settab { width:500px; margin:50px auto;}.settab li{ border:1px solid #999; width:90px; margin:0 4px; float:left; text-align:center; cursor:pointer;}.settab div { width:498px; height:200px; border:1px solid #999; display:none;}.settab .tab_li { background:#ccc;}.settab .settab_div { display:block;}/*setTab end*/</style> </head><body><div id="settab1" class="settab"><ul class="clearfix"><li class="tab_li">Test 1</li><li>Test 2</li><li>Test 3</li><li>Test 4</li><li>Test 5</li></ul><div class="settab_div">The first box</div><div>Second box</div><div>Third box</div><div>Fourth box</div><div>Fifth box</div></div><div id="settab2" class="settab"><ul class="clearfix"><li class="tab_li">Test 1</li><li>Test 2</li><li>Test 3</li><li>Test 4</li><li>Test 5</li></ul><div class="settab_div">The first box</div><div>Second box</div><div>Third box</div><div>Fourth box</div><div>Fifth box</div></div><div id="settab3" class="settab"><ul class="clearfix"><li class="tab_li">Test 1</li><li>Test 2</li><li>Test 3</li><li>Test 4</li><li>Test 5</li></ul><div class="settab_div">The first box</div><div>Second box</div><div>Third box</div><div>Fourth box</div><div>Fifth box</div></div> </body></html></td> </tr></table>
Tip: you can modify some code before running
