·设为首页收藏本站📧邮箱修改🎁免费下载专区📒收藏夹👽聊天室📱AI智能体
🔄最新发布📃文档资料库🆔加群看共享绿色软件切换到窄版
立即注册
DZ插件网»🏠首页 › Discuz! › 站长圈子 › Discuz! X3.5专区 › 选项卡怎么隐藏其他的代码？
返回列表 发布新帖

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

291 1
发表于 2023-2-2 15:40:19 | 查看全部 阅读模式

马上注册，免费下载更多dz插件网资源。

您需要 登录 才可以下载或查看，没有账号？立即注册

×
之前不会用选项卡代码，搞了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" style="margin:20px 0 10px 0" >{$pageStyle}</div><!--{else}-->    <div class="zz_no_content cl">             <i class="iconfont icon-zanwuneirong-"></i>             <p>{lang no_tag}</p>    </div>
复制代码

选项卡相关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人回答
选项, 选项卡, 怎么, 隐藏, 其他
我要说一句 收起回复
最后回复时间：2025-03-19 20:22:20社区官方发言人回复了此贴
赞赏
回复

使用道具 举报

相关帖子

评论1

AI智能体Lv.7 发表于 2025-3-19 20:22:20 | 查看全部
要实现选项卡内容中隐藏翻页代码的功能，你可以通过JavaScript来控制翻页代码的显示与隐藏。具体来说，你可以在切换选项卡时，根据当前选中的选项卡来动态隐藏或显示翻页代码。

以下是一个可能的解决方案：

1. **给翻页代码添加一个唯一的标识**：首先，你需要给翻页代码的容器添加一个唯一的ID或类名，以便在JavaScript中能够准确地找到它。

   例如，假设你的翻页代码是这样的：
  
  1. <div class="pagination">
  2.        {$pageStyle}
  3.        {lang no_tag}
  4.    </div>
复制代码


   你可以给它添加一个唯一的类名或ID：
  
  1. <div id="pagination" class="pagination">
  2.        {$pageStyle}
  3.        {lang no_tag}
  4.    </div>
复制代码


2. **修改JavaScript代码**：在切换选项卡时，根据当前选中的选项卡来隐藏或显示翻页代码。

   你可以修改你的JavaScript代码如下：
  
  1. let nav = document.getElementsByClassName('nav1');
  2.    let but = nav[0].getElementsByTagName('div'); // 注意这里需要取第一个元素
  3.    let list = document.getElementsByClassName('list');
  4.    let item = list[0].getElementsByTagName('div'); // 注意这里需要取第一个元素
  5.    let pagination = document.getElementById('pagination'); // 获取翻页代码的容器

  7.    // 隐藏多余选项列表
  8.    for(let i = 1; i < item.length; i++){
  9.        item[i].style.display = "none";
  10.    }

  12.    // 循环按钮绑定事件
  13.    for(let k = 0; k < but.length; k++){
  14.        but[k].onclick = function(){
  15.            for(let j = 0; j < but.length; j++){
  16.                but[j].className = "";
  17.                item[j].style.display = "none";
  18.            }
  19.            but[k].className = "active";
  20.            item[k].style.display = "block";

  22.            // 根据当前选中的选项卡来隐藏或显示翻页代码
  23.            if(k === 0) { // 假设第一个选项卡是默认的“明星”选项卡
  24.                pagination.style.display = "none"; // 隐藏翻页代码
  25.            } else {
  26.                pagination.style.display = "block"; // 显示翻页代码
  27.            }
  28.        }
  29.    }
复制代码


3. **CSS调整**：如果你希望在隐藏翻页代码时，页面布局不会受到影响，可以在CSS中添加一些样式来调整布局。

   例如：
  
  1. .pagination {
  2.        display: block; /* 默认显示 */
  3.    }

  5.    .pagination.hidden {
  6.        display: none; /* 隐藏 */
  7.    }
复制代码


   然后在JavaScript中动态添加或移除`hidden`类：
  
  1. if(k === 0) {
  2.        pagination.classList.add('hidden'); // 隐藏翻页代码
  3.    } else {
  4.        pagination.classList.remove('hidden'); // 显示翻页代码
  5.    }
复制代码


通过以上步骤，你应该能够实现在切换选项卡时隐藏或显示翻页代码的功能。如果你有其他特殊需求，可以根据实际情况进一步调整代码。
-- 本回答由 人工智能 AI智能体 生成，内容仅供参考，请仔细甄别。
我要说一句 收起回复
回复 支持 反对

使用道具 举报

返回列表 发布新帖

回复
 懒得打字嘛，点击右侧快捷回复【查看最新发布】   【应用商城享更多资源】
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

图文热点
关闭

站长推荐上一条 /1 下一条

AI智能体

关于我们

关于我们 免责声明 应用市场 下载中心

服务支持

有问必答 优秀站点 常见问题 建站必看
投诉/建议联系

discuzaddons@vip.qq.com

未经授权禁止转载，复制和建立镜像，
如有违反，按照公告处理!!!
  • 联系QQ客服
  • 添加微信客服

联系DZ插件网微信客服|最近更新|Archiver|手机版|小黑屋|DZ插件网! ( 鄂ICP备20010621号-1 )|网站地图 知道创宇云防御

您的IP:3.14.251.87,GMT+8, 2025-4-3 05:57 , Processed in 0.318647 second(s), 78 queries , Gzip On, Redis On.

Powered by Discuz! X5.0 Licensed

© 2001-2025 Discuz! Team.

关灯 在本版发帖
扫一扫添加微信客服
 QQ客服返回顶部
快速回复 返回顶部 返回列表