- <!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>
- <title>js控制tab选项卡效果</title>
- <style?type="text/css">
- ?????*{margin:0?auto;padding:0;}
- ???ul{list-style-type:none;width:200px;height:20px;}
- ???ul?li{display:block;width:50px;height:20px;float:left;cursor:pointer;}
- ???.clear{clear:both;}
- ???#content{position:relative;}
- ???.tab0,.tab1,.tab2,.tab3,#content{width:200px;height:200px;}
- ???.tab0,.tab1,.tab2,.tab3{position:relative;}
- ???.tab0{background:#ccc;display:block;}
- ???.tab1{background:#06f;display:none;}
- ???.tab2{background:#f60;display:none;}
- ???.tab3{background:pink;display:none;}
- </style>
- </head>
- <body>
- ???<ul?id="menu">
- ??????<li?style="background:#ccc;"?name="t"?id="t"?onclick="is_click(0);">tab1</li>
- ??????<li?style="background:#06f;"?name="t"?id="t"?onclick="is_click(1);">tab2</li>
- ??????<li?style="background:#f60;"?name="t"?id="t"?onclick="is_click(2);">tab3</li>
- ??????<li?style="background:pink;"?name="t"?id="t"?onclick="is_click(3);">tab4</li>
- ???</ul>
- ???<div?class="clear"></div>
- ???<div?id="content">
- ???????????<div?name="tab"?id="tab"?class="tab0">0</div>
- ???????????<div?name="tab"?id="tab"?class="tab1">1</div>
- ???????????<div?name="tab"?id="tab"?class="tab2">4</div>
- ???????????<div?name="tab"?id="tab"?class="tab3">3</div>
- ??</div>
- ??<script?type="text/javascript">
- ?????var?li=document.getElementsByName("t");
- ?????var?divs=document.getElementsByName("tab");
- ?????function?is_click(i){
- ????????????for(var?j=0;j<li.length;j++)????{
- ?????????????????if(j?!=?i){
- ????????????????????divs[j].style.display="none";
- ?????????????????}else{
- ??????????????????????divs[j].style.display="block";
- ?????????????????}
- ????????????}
- ?????}
- </script>
- </body>
- </html>
javascript控制制作tab选项卡(兼容ie6,FF,chrome等)
转载请注明出处博客 » javascript控制制作tab选项卡(兼容ie6,FF,chrome等)