怎样实现联动选项卡,

                <li class="active">我的账户</li>
                <li>我的资产</li>
                <li>个人信息</li>
                <li>活动管理</li>
            </ul>
            <div class="userTab"   id="userTabChild">
                <ul class="tabList" id="tabList" style="display: block;" >
                    <li class="active">账户总览</li>
                    <li>交易记录</li>
                    <li>充值提现</li>
                    <li>银行卡管理</li>
                </ul>
                <ul class="tabList" style="display: none;" >
                    <li>我的投资 </li>
                    <li>投资记录</li>
                    <li>回款计划</li>
                    <li>我的借款</li>
                </ul>
                <ul class="tabList" style="display: none;" >
                    <li>#</li>
                </ul>
                <ul class="tabList" style="display: none;" >
                    <li>推广注册</li>
                </ul>
            </div>
            <div class="tabInfoContent" id="tabInfoContent">
                <div class="userInfo">111</div>
                <div class="userInfo">222</div>
                <div class="userInfo">333</div>
                <div class="userInfo">444</div>
            </div>
window.onload = function(){
               var list = document.getElementById("userTab");
               var btn = list.getElementsByTagName('li');
               var listContent = document.getElementById("userTabChild");
               var tabContentWrapper = listContent.getElementsByClassName('tabList');
               
                for( i = 0 ; i < btn.length ; i++ ){
                       btn[i].index = i;
                       btn[i].addEventListener('click' , function(){
                           for( i = 0 ; i < btn.length ; i++ ){
                               btn[i].className = '';
                               tabContentWrapper[i].style.display = 'none';
                           }
                           this.className = 'active';
                           tabContentWrapper[this.index].style.display = 'block';
                       },false);
               }

图片描述

阅读 2.4k
1 个回答
新手上路,请多包涵

你把你的那个选项卡 改一下 改成多级联动就好了 ==!

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题