兼容ie的选项卡

最新推荐文章于 2021-06-22 04:13:54 发布

原创最新推荐文章于 2021-06-22 04:13:54 发布 · 273 阅读

CC 4.0 BY-SA版权

<!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>





点击相应的标题就会显示相应的内容。<br style="margin: 0px; padding: 0px;" />哈哈，做好了以后去看了看网上其他人做的tab选项卡后，发现还是我的比较简洁，美啊<br style="margin: 0px; padding: 0px;" />可是测试的时候我发现了一个问题<br style="margin: 0px; padding: 0px;" />没有ID，只有Name的话，IE下getElementsByName()不能工作，而FF正常。<br style="margin: 0px; padding: 0px;" />没有Name属性，只有ID的话，IE下getElementsByName()正常，而FF不能工作。<br style="margin: 0px; padding: 0px;" />所以我为每一个元素都加上了相同的id和name，这样就兼容了。IE6下也可以完美的工作了<br style="margin: 0px; padding: 0px;" />所以，以后如果在遇到用了getElementsByName()，明明有name属性，但在IE中却不能起效，在其他浏览器中却可以起效，不用怀疑，肯定是getElementsByName()这里有问题了，赶紧加个相同值的ID吧!