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

zoukankan html css js c++ java

javascript控制制作tab选项卡(兼容ie6,FF,chrome等)
今天分享一个javascript制作选项卡的代码。所以自己尝试做了，以前一般都是用CSS做的，现在用js做，虽然很简单，不过要考虑到它的可维护性和可重复性，扩展性就要多考虑一些东西了。
下面是我写的代码：
<!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;200px;height:20px;}

   ul li{display:block;50px;height:20px;float:left;cursor:pointer;}

   .clear{clear:both;}

   #content{position:relative;}

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

相关阅读:
使用C++调用并部署pytorch模型
 相位展开(phase unwrapping)算法研究与实践
 【计算机视觉】图像配准(Image Registration)
读书笔记－《数字图像处理》（更新中...）
ssh框架复习
 SVN 版本控制
 Spring的jdbcTemplate 与原始jdbc 整合c3p0的DBUtils 及Hibernate 对比 Spring配置文件生成约束的菜单方法
 JDK 动态代理讨债实例
 Spring 框架配置web.xml 整合web struts
Spring整合JUnit spring静态对象属性的注入

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