去评论
dz插件网

选项卡怎么隐藏其他的代码?

浅生
2023/02/02 15:40:19
之前不会用选项卡代码,搞了4个单页组合在一起,今天找了代码,又研究了一下,基本实现了一个页面选项卡应用。





但是现在有一个问题,如明星等其他选项卡内容也会有翻页,点击是默认页面的翻页(明星等其他内容是写死内容的),我现在想让明星等选项卡内容隐藏翻页代码。




选项卡div代码
  1. <div class="nav1"><div class="active">默认</div><div class="">明星</div><div class="">推书</div><div class="">TXT</div></div>        <!--选项卡start-->        <div class="taglist"> <div class="list"><div>    <ul class="cl">            <!--{loop $tagarray $tag}-->                        <li class="{echo $yide_color[array_rand($yide_color,1)];}">                  <a href="tag-$tag[tagid].html">$tag[tagname]</a>                        </li>                                   <!--{/loop}-->                             </ul>    </div><div><ul class="cl">    <!--{block/189}-->    </ul></div><div>       <ul class="cl">    <!--{block/190}-->    </ul>        </div><div><ul class="cl">    <!--{block/192}--></ul></div></div>    </div>

翻页相关代码
  1. <div class="tag-pg" copycode($('code_gBJ'));">复制代码

选项卡相关CSS
  1. .bg {    background: #fff;}.taglist{padding: 10px 15px;    line-height: 13px;    font-size: 13px;    background: #fff;   }      .nav1{width: 100%;height: 50px;display: flex;background-color: #fff;}.nav1 div{width: 30px;    height: 42px;    line-height: 50px;    text-align: center;   font-size: 14px;    margin: 0 0 0 30px;} .list{width: 98%;margin-left: 2%;padding: 10px 0 0 0;}.list div{width: 100%;height: 100%;}.active{background-color: #fff;color: #333;font-size: 14px;border-bottom: 2.5px solid #59d192;}


选项卡JS代码
  1. <script type="text/javascript"> let nav = document.getElementsByClassName('nav1')[0];let but = nav.getElementsByTagName('div'); let list = document.getElementsByClassName('list')[0];let item = list.getElementsByTagName('div'); // 隐藏多余选项列表for(let i = 1; i < item.length; i++){item[i].style.display = "none";} // 循环按钮绑定事件for(let k = 0; k < but.length; k++){but[k].onclick = function(){ for(let j = 0; j < but.length; j++){but[j].className = "";item[j].style.display = "none";}but[k].className = "active";item[k].style.display = "block";}}console.log(item)</script>

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

选项卡.rar(1.62 KB, 下载次数: 0)1 小时前 上传
点击文件名下载附件




我知道答案 回答被采纳将会获得5 金币 已有0人回答