svip

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

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. 
    
40.   </ul>
    
41. </div>
    
42.     </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;}

复制代码