码迷,mamicode.com
首页 > 编程语言 > 详细

javascript控制制作tab选项卡(兼容ie6,FF,chrome等)

时间:2015-01-17 15:08:15      阅读:200      评论:0      收藏:0      [点我收藏+]

标签:

今天分享一个javascript制作选项卡的代码。所以自己尝试做了,以前一般都是用CSS做的,现在用js做,虽然很简单,不过要考虑到它的可维护性和可重复性,扩展性就要多考虑一些东西了。
   下面是我写的代码:

技术分享

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>js控制tab选项卡效果</title>
  5. <style type="text/css">
  6.      *{margin:0 auto;padding:0;}
  7.    ul{list-style-type:none;width:200px;height:20px;}
  8.    ul li{display:block;width:50px;height:20px;float:left;cursor:pointer;}
  9.    .clear{clear:both;}
  10.    #content{position:relative;}
  11.    .tab0,.tab1,.tab2,.tab3,#content{width:200px;height:200px;}
  12.    .tab0,.tab1,.tab2,.tab3{position:relative;}
  13.    .tab0{background:#ccc;display:block;}
  14.    .tab1{background:#06f;display:none;}
  15.    .tab2{background:#f60;display:none;}
  16.    .tab3{background:pink;display:none;}
  17. </style>
  18. </head>
  19. <body>
  20.    <ul id="menu">
  21.       <li style="background:#ccc;" name="t" id="t" onclick="is_click(0);">tab1</li>
  22.       <li style="background:#06f;" name="t" id="t" onclick="is_click(1);">tab2</li>
  23.       <li style="background:#f60;" name="t" id="t" onclick="is_click(2);">tab3</li>
  24.       <li style="background:pink;" name="t" id="t" onclick="is_click(3);">tab4</li>
  25.    </ul>
  26.    <div class="clear"></div>
  27.    <div id="content">
  28.            <div name="tab" id="tab" class="tab0">0</div>
  29.            <div name="tab" id="tab" class="tab1">1</div>
  30.            <div name="tab" id="tab" class="tab2">4</div>
  31.            <div name="tab" id="tab" class="tab3">3</div>
  32.   </div>
  33.   <script type="text/javascript">
  34.      var li=document.getElementsByName("t");
  35.      var divs=document.getElementsByName("tab");
  36.      function is_click(i){
  37.             for(var j=0;j<li.length;j++)    {
  38.                  if(j != i){
  39.                     divs[j].style.display="none";
  40.                  }else{
  41.                       divs[j].style.display="block";
  42.                  }
  43.             }
  44.      }
  45. </script>
  46. </body>
  47. </html>

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

javascript控制制作tab选项卡(兼容ie6,FF,chrome等)

标签:

原文地址:http://www.cnblogs.com/tiankong102/p/4230439.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!