JS实现简单Tab切换方法

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

html
  1. <div class="ztbox">
  2.       <div class="rank_tit">
  3.         <ul>
  4.           <li class='last'><a> <span class="wy">游戏排行</span></a> </li>
  5.           <li><a><span class="rj">软件排行</span></a></li>
  6.         </ul>
  7.       </div>
  8.       <div class="rank_list qrank_list main" style="display: block;">
  9.         <ul class="clearfix">
  10.             <li>
  11.               <div class="li_rank"><span class="ra1">1</span></div>
  12.               <div class="li_infro">
  13.                 <div class="dv_img"><a href="/"><img class="lazy" data-original="/" alt="标题" src="/" style="display: inline;"></a></div>
  14.                 <div class="dv_txt">
  15.                   <p class="ptit"><a href="/">标题</a></p>
  16.                   <p class="ptxt">大小:282.1 MB</p>
  17.                   <p class="pstar"><span class="star4"></span></p>
  18.                 </div>
  19.               </div>
  20.               <div class="li_btn"><a href="/" class="down_an azxz">免费下载</a></div>
  21.             </li>
  22.          
  23.         </ul>
  24.       </div>
  25. <div class="rank_list qrank_list main">
  26.   <ul class="clearfix">
  27.       <li>
  28.         <div class="li_rank"><span class="ra1">1</span></div>
  29.         <div class="li_infro">
  30.           <div class="dv_img"><a href="//"><img class="lazy" data-original="/" alt="标题" src="/" style="display: inline;"></a></div>
  31.           <div class="dv_txt">
  32.             <p class="ptit"><a href="/">标题</a></p>
  33.             <p class="ptxt">大小:282.1 MB</p>
  34.             <p class="pstar"><span class="star4"></span></p>
  35.           </div>
  36.         </div>
  37.         <div class="li_btn"><a href="/" class="down_an azxz">免费下载</a></div>
  38.       </li>

  39.   </ul>
  40. </div>
  41.     </div>
复制代码
js
  1.   <script>
  2.       var tab_list = document.querySelector('.rank_tit');
  3.       var lis = tab_list.querySelectorAll('li');
  4.       var items = document.querySelectorAll('.rank_list');
  5.       //for 循环绑定点击事件
  6.       for(var i=0;i < lis.length;i++){
  7.           lis[i].setAttribute('index',i);
  8.          lis[i].onclick = function() {
  9.              //
  10.               for(var i=0;i < lis.length;i++){
  11.                   lis[i].className = '';
  12.               }
  13.               //留下现在需要用的
  14.               this.className = 'last';
  15.               //下面显示内容模块
  16.               var index = this.getAttribute('index');
  17.             console.log(index);
  18.               //去掉其他的 item,让这些隐藏起来
  19.               //只留下当前的 item,让它显示出来
  20.               for(var i=0;i<items.length;i++){
  21.                   items[i].style.display='none';
  22.               }
  23.               items[index].style.display = 'block';
  24.           }
  25.       }
  26.   </script>
复制代码
ccs里面必须加上
  1. .rank_list { display: none;}
复制代码






上一篇:CSS实现背景图片详解&amp;&amp;全屏铺满自适应的方式
下一篇:纯html+css实现自动锁定头部跟随滑动