• 首页

    • tab选项卡在火狐里和360里没用 在IE里就有用，我是两个tab调用的一个js语句

    <!--content-->
    function setTab(name,cursel,n){
    for(i=1;i<=n;i++){
    var menu=document.getElementById(name+i);
    var con=document.getElementById("con_"+name+"_"+i);
    menu.className=i==cursel?"hover":"";
    con.style.display=i==cursel?"block":"none";
    }
    }
    <!-end-contend-->

    <div id="con_two_2" class="nei" style="display:none;">
    <div class="menu">
    <ul>
    <li id="tree1" class="hover" onclick="setTab('tree',1,4)">工程类型</li>
    <li id="tree2" onclick="setTab('tree',2,4)">工程类别</li>
    <li id="tree3" onclick="setTab('tree',3,4)">复杂程度</li>
    <li id="tree4" onclick="setTab('tree',4,4)">内容确认</li>
    </ul>
    </div>

    <div class="content">
    <div id="con_tree_1" style="display:none;">123</div>
    <div id="con_tree_2" style="display:none;">hahahahha</div>
    <div id="con_tree_3" style="display:none;">hahahahha</div>
    <div id="con_tree_4" style="display:none;">hahahahha</div>
    </div>
    </div>

    推荐答案   2014-10-14
    　　尊敬的用户，您好！很高兴为您答疑。
    　　您的dom对象获取有问题啊。其实像这种略有有点复杂的操作，建议优先考虑引入jQuery框架，可以让您的代码更加优雅。下面是我实现的一组tab效果的js示例：
    　　function setTab(obj,type){
    　　$("li").removeClass("on")
    　　$(obj).toggleClass("on");
    　　if(type=="user1"){
    　　$("#user1").show();
    　　$("#user2").hide();
    　　$("#user3").hide();
    　　}else if(type=="user2"){
    　　$("#user1").hide();
    　　$("#user2").show();
    　　$("#user3").hide();
    　　}else if(type=="user13"){
    　　$("#user1").hide();
    　　$("#user2").hide();
    　　$("#user3").show();
    　　}else{
    　　$("#user1").hide();
    　　$("#user2").hide();
    　　$("#user3").hide();
    　　}
    　　}
    代码是不是相对优雅简洁很多？而且这个方式下，规避了IE和非IE浏览器下display的显隐问题。也规避了doucment.getElementById()方法在火狐和IE内核下获取到的对象差异的问题。
    　　希望我的回答对您有所帮助，如有疑问，欢迎继续咨询我们。
    温馨提示：答案为网友推荐，仅供参考
    其他回答
    第1个回答  2014-10-14

    我给你写一个简单点的

    <div class="tabs">
      <div class="navs">
          <a href="javascript:" class="active">menu1</a>
          <a href="javascript:">menu2</a>
          <a href="javascript:">menu3</a>
      </div>
      <div class="contents">
          <div class="content active">content1</div>
          <div class="content">content2</div>
          <div class="content">content3</div>
      </div>
    </div>

    .content{
      display:none;/* 默认隐藏 */
    }
    .content.active{
      display:block;/*这个样式的div显示*/
    }

    js:

    //jquery
    function Tab(wrap){
      $(wrap).each(function(){
        var tab = $(this);
          var contents = tab.find('.contents').children('div');
          tab.on('click' , '.navs a' , function(){
            var menu = $(this),
                index = menu.index();
                //给当前点击的按钮添加样式，并且移除其它的样式
                menu.addClass('active').siblings().removeClass('active');
                //显示对应的内容,并且隐藏其它的内容
                contents.eq(index).addClass('active').siblings().removeClass('active');
          });
      });
    }
    Tab('.tabs');//使用class同一个页面里不需要多次初始化

    //原生ie8+
    function Tab(wraps){
      each(wraps , function(wrap){
        var contents = $('.contents > div' , wrap),
            menus = $('.navs a' , wrap);
        each(menus , function(menu , index){
          setClass(menus , index , 'active' , '');
          setClass(contents , index , 'active' , 'content');
        });
      });
      //还原样式和设置当前元素样式
      function setClass(list , index , cls , def){
        each(list , function(item){
            item.className = def;//清空样式
        });
        list[index].className += ' ' + cls;
      }
    }
    function $(wrap , parent){
      return [].slice.call((parent || document).querySelectorAll(wrap));
    }
    function each(arr , callback){
      for(var i=0 , item;item = arr[i] ; i++ ) callback.call(item , item , i , arr);
    }
    var addEvent = document.addEventListener ? function(el , type , fn){
      el.addEventListener(type , fn , false);
    } : function(el , type , fn){
      el.attachEvent('on' + type , fn , false);
    };
    Tab($('.wrap'));//使用class同一个页面里不需要多次初始化

    第2个回答  2014-10-14
    <!doctype html>
    <html lang="en">
     <head>
      <meta charset="UTF-8">
      <meta name="Generator" content="EditPlus®">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <title>Document</title>
      <script>
          function setTab(name,cursel,n){ 
    for(i=1;i<=n;i++){ 
     var menu=document.getElementById(name+i); 
     var con=document.getElementById("con_"+name+"_"+i); 
     menu.className=i==cursel?"hover":""; 
     con.style.display=i==cursel?"block":"none"; 
    } 
         } 
      </script>
     </head>
     <body>
      <div id="con_two_1" class="nei" >
                          <div class="menu">
                             <ul>
                                <li id="tree1" class="hover" onclick="setTab('tree',1,4)">工程类型</li>
       <li id="tree2" onclick="setTab('tree',2,4)">工程类别</li>
       <li id="tree3" onclick="setTab('tree',3,4)">复杂程度</li>
       <li id="tree4" onclick="setTab('tree',4,4)">内容确认</li>
                             </ul>
                           </div>
     
    <div class="content">
    <div id="con_tree_1" style="display:none;">123</div>
    <div id="con_tree_2" style="display:none;">hahahahha1</div>
    <div id="con_tree_3" style="display:none;">hahahahha2</div>
    <div id="con_tree_4" style="display:none;">hahahahha3</div>
    </div>
    </div>

    <div id="con_two_2" class="nei" >
                          <div class="menu">
                             <ul>
                                <li id="treee1" class="hover" onclick="setTab('treee',1,4)">工程类型</li>
       <li id="treee2" onclick="setTab('treee',2,4)">工程类别</li>
       <li id="treee3" onclick="setTab('treee',3,4)">复杂程度</li>
       <li id="treee4" onclick="setTab('treee',4,4)">内容确认</li>
                             </ul>
                           </div>
     
    <div class="content">
    <div id="con_treee_1" style="display:none;">123</div>
    <div id="con_treee_2" style="display:none;">hahahahha22</div>
    <div id="con_treee_3" style="display:none;">hahahahha33</div>
    <div id="con_treee_4" style="display:none;">hahahahha44</div>
    </div>
    </div>
     </body>
    </html>

    我在ie 火狐 谷歌下面测试都是正常的...

    第3个回答  2014-10-14
    jquery-easyui有现成的

    相关了解……

    你可能感兴趣的内容

    大家正在搜
    相关问题
    JS 选项卡效果 在火狐里不可用，但是在IE里可以，求鉴定！...
    Hbuilder MUI选项卡怎么样用js使其切换到指定的T...
    Hbuilder MUI选项卡怎么样用js使其切换到指定的T...
    JS和JQ写的Tab切换怎么兼容IE6
    火狐浏览器中js怎么在下面的程序里用回车实现tab键的功能
    eclipse里怎么把tab键换成空格

    本站内容来自于网友发表，不代表本站立场，仅表示其个人看法，不对其真实性、正确性、有效性作任何的担保
    相关事宜请发邮件给我们
    © 非常风气网