久久久久av_欧美日韩一区二区在线_国产精品三区四区_日韩中字在线

Discuz! 官方交流社區(qū)

標(biāo)題: 選項(xiàng)卡怎么隱藏其他的代碼？ [打印本頁]
作者: 一定    時(shí)間: 2023-2-2 14:59
標(biāo)題: 選項(xiàng)卡怎么隱藏其他的代碼？
之前不會(huì)用選項(xiàng)卡代碼，搞了4個(gè)單頁組合在一起，今天找了代碼，又研究了一下，基本實(shí)現(xiàn)了一個(gè)頁面選項(xiàng)卡應(yīng)用。


(, 下載次數(shù): 21)


但是現(xiàn)在有一個(gè)問題，如明星等其他選項(xiàng)卡內(nèi)容也會(huì)有翻頁，點(diǎn)擊是默認(rèn)頁面的翻頁（明星等其他內(nèi)容是寫死內(nèi)容的），我現(xiàn)在想讓明星等選項(xiàng)卡內(nèi)容隱藏翻頁代碼。

(, 下載次數(shù): 15)


選項(xiàng)卡div代碼
  1. <div class="nav1">
  2. <div class="active">默認(rèn)</div>
  3. <div class="">明星</div>
  4. <div class="">推書</div>
  5. <div class="">TXT</div>
  6. </div>
  7.         <!--選項(xiàng)卡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>

  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>
復(fù)制代碼


翻頁相關(guān)代碼

  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>
復(fù)制代碼


選項(xiàng)卡相關(guān)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. }

  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. }
復(fù)制代碼



選項(xiàng)卡JS代碼

  2. <script type="text/javascript">

  4. let nav = document.getElementsByClassName('nav1')[0];
  5. let but = nav.getElementsByTagName('div');

  7. let list = document.getElementsByClassName('list')[0];
  8. let item = list.getElementsByTagName('div');

  10. // 隱藏多余選項(xiàng)列表
  11. for(let i = 1; i < item.length; i++){
  12. item[i].style.display = "none";
  13. }

  15. // 循環(huán)按鈕綁定事件
  16. for(let k = 0; k < but.length; k++){
  17. but[k].onclick = function(){

  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>
復(fù)制代碼


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

(, 下載次數(shù): 95)


作者: 一定    時(shí)間: 2023-2-2 21:08
已解決了。。。。



歡迎光臨 Discuz! 官方交流社區(qū) (http://www.9999xn.com/) Powered by Discuz! W1.0