JS实现简单Tab切换方法

实现过程如下，首先利用排他思想选定模块选项卡，随后根据用户自定义标签再次利用排他思想显示内容模块。

html

<div class="ztbox">
      <div class="rank_tit">
        <ul>
          <li class='last'><a> <span class="wy">游戏排行</span></a> </li>
          <li><a><span class="rj">软件排行</span></a></li>
        </ul>
      </div>
      <div class="rank_list qrank_list main" style="display: block;">
        <ul class="clearfix">
            <li>
              <div class="li_rank"><span class="ra1">1</span></div>
              <div class="li_infro">
                <div class="dv_img"><a href="/"><img class="lazy" data-original="/" alt="标题" src="/" style="display: inline;"></a></div>
                <div class="dv_txt">
                  <p class="ptit"><a href="/">标题</a></p>
                  <p class="ptxt">大小：282.1 MB</p>
                  <p class="pstar"><span class="star4"></span></p>
                </div>
              </div>
              <div class="li_btn"><a href="/" class="down_an azxz">免费下载</a></div>
            </li>
          
        </ul>
      </div>
<div class="rank_list qrank_list main">
  <ul class="clearfix">
      <li>
        <div class="li_rank"><span class="ra1">1</span></div>
        <div class="li_infro">
          <div class="dv_img"><a href="//"><img class="lazy" data-original="/" alt="标题" src="/" style="display: inline;"></a></div>
          <div class="dv_txt">
            <p class="ptit"><a href="/">标题</a></p>
            <p class="ptxt">大小：282.1 MB</p>
            <p class="pstar"><span class="star4"></span></p>
          </div>
        </div>
        <div class="li_btn"><a href="/" class="down_an azxz">免费下载</a></div>
      </li>

  </ul>
</div>
    </div>

js

<script>
      var tab_list = document.querySelector('.rank_tit');
      var lis = tab_list.querySelectorAll('li');
      var items = document.querySelectorAll('.rank_list');
      //for 循环绑定点击事件
      for(var i=0;i < lis.length;i++){
          lis[i].setAttribute('index',i);
         lis[i].onclick = function() {
             //
              for(var i=0;i < lis.length;i++){
                  lis[i].className = '';
              }
              //留下现在需要用的
              this.className = 'last';
              //下面显示内容模块
              var index = this.getAttribute('index');
            console.log(index);
              //去掉其他的 item，让这些隐藏起来
              //只留下当前的 item，让它显示出来
              for(var i=0;i<items.length;i++){
                  items[i].style.display='none';
              }
              items[index].style.display = 'block';
          }
      }
  </script>

ccs里面必须加上

.rank_list { display: none;}

感谢您的来访，获取更多精彩文章请收藏本站。