選項卡怎么隱藏其他的代碼？

一定

之前不會用選項卡代碼，搞了4個單頁組合在一起，今天找了代碼，又研究了一下，基本實現了一個頁面選項卡應用。





但是現在有一個問題，如明星等其他選項卡內容也會有翻頁，點擊是默認頁面的翻頁（明星等其他內容是寫死內容的），我現在想讓明星等選項卡內容隱藏翻頁代碼。




選項卡div代碼

1. <div class="nav1">
   
2. <div class="active">默認</div>
   
3. <div class="">明星</div>
   
4. <div class="">推書</div>
   
5. <div class="">TXT</div>
   
6. </div>
   
7.         <!--選項卡start-->
   
8.         <div class="taglist">
   
9. <div class="list">
   
10. <div>
    
11.     <ul class="cl">
    
12.             <!--{loop $tagarray $tag}-->
    
13.                        <li class="{echo $yide_color[array_rand($yide_color,1)];}">
    
14.                   <a href="tag-$tag[tagid].html">$tag[tagname]</a>
    
15.                        </li>
    
16.                        
    
17.             <!--{/loop}-->
    
18.             
    
19.                 </ul>
    
20.    
    
21. </div>
    
22. 
    
23. <div><ul class="cl">
    
24.     <!--{block/189}-->
    
25.     </ul></div>
    
26. <div>
    
27.    
    
28.     <ul class="cl">
    
29.     <!--{block/190}-->
    
30.     </ul>
    
31.    
    
32.     </div>
    
33. <div><ul class="cl">
    
34.     <!--{block/192}-->
    
35. </ul></div>
    
36. </div>
    
37.     </div>

復制代碼

翻頁相關代碼

1. <div class="tag-pg" style="margin:20px 0 10px 0" >{$pageStyle}</div>
   
2. <!--{else}-->
   
3.     <div class="zz_no_content cl">
   
4.              <i class="iconfont icon-zanwuneirong-"></i>
   
5.              <p>{lang no_tag}</p>
   
6.     </div>

復制代碼

選項卡相關CSS

1. .bg {
   
2.     background: #fff;
   
3. }
   
4. .taglist{padding: 10px 15px;
   
5.     line-height: 13px;
   
6.     font-size: 13px;
   
7.     background: #fff;
   
8.    }
   
9.       .nav1{
   
10. width: 100%;
    
11. height: 50px;
    
12. display: flex;
    
13. background-color: #fff;
    
14. }
    
15. .nav1 div{
    
16. width: 30px;
    
17.     height: 42px;
    
18.     line-height: 50px;
    
19.     text-align: center;
    
20.    font-size: 14px;
    
21.     margin: 0 0 0 30px;
    
22. }
    
23. 
    
24. .list{
    
25. width: 98%;
    
26. margin-left: 2%;
    
27. padding: 10px 0 0 0;
    
28. }
    
29. .list div{
    
30. width: 100%;
    
31. height: 100%;
    
32. }
    
33. .active{
    
34. background-color: #fff;
    
35. color: #333;
    
36. font-size: 14px;
    
37. border-bottom: 2.5px solid #59d192;
    
38. }

復制代碼

選項卡JS代碼

1. 
   
2. <script type="text/javascript">
   
3. 
   
4. let nav = document.getElementsByClassName('nav1')[0];
   
5. let but = nav.getElementsByTagName('div');
   
6. 
   
7. let list = document.getElementsByClassName('list')[0];
   
8. let item = list.getElementsByTagName('div');
   
9. 
   
10. // 隱藏多余選項列表
    
11. for(let i = 1; i < item.length; i++){
    
12. item[i].style.display = "none";
    
13. }
    
14. 
    
15. // 循環按鈕綁定事件
    
16. for(let k = 0; k < but.length; k++){
    
17. but[k].onclick = function(){
    
18. 
    
19. for(let j = 0; j < but.length; j++){
    
20. but[j].className = "";
    
21. item[j].style.display = "none";
    
22. }
    
23. but[k].className = "active";
    
24. item[k].style.display = "block";
    
25. }
    
26. }
    
27. console.log(item)
    
28. </script>

復制代碼

最后附上tag頁面的文件以及地址：https://www.honghuangwenxue.com/misc.php?mod=tag

選項卡.rar (1.62 KB, 下載次數: 95)

2023-2-2 14:58 上傳

點擊文件名下載附件

我知道答案 回答被采納將會獲得1 貢獻 已有1人回答

一定

已解決了。。。。