选项卡怎么隐藏其他的代码？
之前不会用选项卡代码，搞了4个单页组合在一起，今天找了代码，又研究了一下，基本实现了一个页面选项卡应用。但是现在有一个问题，如明星等其他选项卡内容也会有翻页，点击是默认页面的翻页（明星等其他内容是写死内容的），我现在想让明星等选项卡内容隐藏翻页代码。
选项卡div代码
<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;}"> <a href="tag-$tag.html">$tag</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>
翻页相关代码
<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
.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代码
<script type="text/javascript"> let nav = document.getElementsByClassName('nav1');let but = nav.getElementsByTagName('div'); let list = document.getElementsByClassName('list');let item = list.getElementsByTagName('div'); // 隐藏多余选项列表for(let i = 1; i < item.length; i++){item.style.display = "none";} // 循环按钮绑定事件for(let k = 0; k < but.length; k++){but.onclick = function(){ for(let j = 0; j < but.length; j++){but.className = "";item.style.display = "none";}but.className = "active";item.style.display = "block";}}console.log(item)</script>
最后附上tag页面的文件以及地址：https://www.honghuangwenxue.com/misc.php?mod=tag
选项卡.rar(1.62 KB, 下载次数: 0)1 小时前 上传
点击文件名下载附件
我知道答案 回答被采纳将会获得5 金币 已有0人回答 要实现选项卡内容中隐藏翻页代码的功能，你可以通过JavaScript来控制翻页代码的显示与隐藏。具体来说，你可以在切换选项卡时，根据当前选中的选项卡来动态隐藏或显示翻页代码。
以下是一个可能的解决方案：
1. **给翻页代码添加一个唯一的标识**：首先，你需要给翻页代码的容器添加一个唯一的ID或类名，以便在JavaScript中能够准确地找到它。
例如，假设你的翻页代码是这样的：
<div class="pagination">
{$pageStyle}
{lang no_tag}
</div>
你可以给它添加一个唯一的类名或ID：
<div id="pagination" class="pagination">
{$pageStyle}
{lang no_tag}
</div>
2. **修改JavaScript代码**：在切换选项卡时，根据当前选中的选项卡来隐藏或显示翻页代码。
你可以修改你的JavaScript代码如下：
let nav = document.getElementsByClassName('nav1');
let but = nav.getElementsByTagName('div'); // 注意这里需要取第一个元素
let list = document.getElementsByClassName('list');
let item = list.getElementsByTagName('div'); // 注意这里需要取第一个元素
let pagination = document.getElementById('pagination'); // 获取翻页代码的容器
// 隐藏多余选项列表
for(let i = 1; i < item.length; i++){
item.style.display = "none";
}
// 循环按钮绑定事件
for(let k = 0; k < but.length; k++){
but.onclick = function(){
for(let j = 0; j < but.length; j++){
but.className = "";
item.style.display = "none";
}
but.className = "active";
item.style.display = "block";
// 根据当前选中的选项卡来隐藏或显示翻页代码
if(k === 0) { // 假设第一个选项卡是默认的“明星”选项卡
pagination.style.display = "none"; // 隐藏翻页代码
} else {
pagination.style.display = "block"; // 显示翻页代码
}
}
}
3. **CSS调整**：如果你希望在隐藏翻页代码时，页面布局不会受到影响，可以在CSS中添加一些样式来调整布局。
例如：
.pagination {
display: block; /* 默认显示 */
}
.pagination.hidden {
display: none; /* 隐藏 */
}
然后在JavaScript中动态添加或移除`hidden`类：
if(k === 0) {
pagination.classList.add('hidden'); // 隐藏翻页代码
} else {
pagination.classList.remove('hidden'); // 显示翻页代码
}
通过以上步骤，你应该能够实现在切换选项卡时隐藏或显示翻页代码的功能。如果你有其他特殊需求，可以根据实际情况进一步调整代码。
-- 本回答由 人工智能 AI智能体 生成，内容仅供参考，请仔细甄别。
页:
[1]