Discuz 高级教程 - discuz.htm 采用Tab样式展示板块

admin · 发表于 2020-8-19 16:46:47

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

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

×

按照惯例先来BB一下原理。
   首先先要说discuz.htm。在默认模板的情况下，discuz的社区首页样式与点击版块分区名称后的样式是一样的，用的都是discuz.htm这个模板。只不过部分区域使用了来做区分。
   在创作模板中，如果我们把版块分区名称和版块名称分别调用。当版块分区名称聚合在一起我们去点击的时候，其实就已经形成了一个伪Tab。为什么这里要说是伪Tab呢。因为在点击版块分区名称的时候，会产生URL的跳转，其实说白了就是跳转到对应的版块分区名称的页面了。只不过模板的样式一样。
   既然我们要做成Tab，那么肯定就不能有URL跳转。于是经过几天的研究和讨论做出了这么一个框架

<div class="Currency_Tab"> <nav class="tab-hd">  <li class="active"><a href="javascript:void(0)">分区</a></li>  </nav> <div class="tab-bd">  <div style="display:{if $key==0}block{else}none{/if};"> 版块 </div>  </div></div>

复制代码

来说一下思路，这里比较复杂。
   因为要用Tab做版块分区名称和版块名称的分离，那么这里就需要分开loop｛实际的效果是版块分区名称单独写loop的查询语句，版块名称使用默认模板的loop查询语句｝。
   这还远远不够，要做出最终的效果，对jQuery的Tab插件也要求很高。因为这里涉及到 tab-bd 里面必须要于 tab-hd 自动对接，不需要对 tab-hd 和 tab-bd 里的框架分别做对应的 id=

   为什么<div class="tab-bd"></div>里只写一个 ，而不是对应 tab-hd 的个数写出对应的<div style="display: block;">版块</div>呢？这里需要着重的解释一下。

   因为如果下面写无限个（对应其 tab-hd 的个数）<div style="display: block;">版块</div>，再在里面去写loop。是可以省很多的事情，不需要考虑style="block"怎么给，也不用考虑怎么和 tab-hd 的个数自动对接。每一个<div style="display: block;">版块</div>里面，直接loop出 tab-hd 对应的版块名称就可以。但是有一个地方需要注意，那就是这么写，只能调用出已存在的版块，如果后续添加新的版块分区名称和版块名称，那还需要在模板里再写对应的查询语句来loop。所以只能loop一次。

这样一个Tab的版块分区就形成了。如果想打开页面时，先显示的是全部版块，那么就需要对上面的框架结构做一个改善

<div class="Currency_Tab"> <nav class="tab-hd"> <li class="active"><a href="javascript:void(0)">全部</a></li>  <li><a href="javascript:void(0)">分区</a></li>  </nav> <div class="tab-bd"> <div style="display: block;">  全部版块  </div>  <div style="display: none;"> 版块 </div>  </div></div>

复制代码

如果使用带有“全部”的Tab时，其他地方与上面的相同。唯独需要注意的一个地方就是默认先展示的“全部版块” 不能从Gid层开始loop，否则就不是按照版块的列表排序而是Gid的。loop这里，需要剔除上面的Gid的loop。直接从版块名称开始loop。

最后：
这里需要特别注意的是：这个jQuery的Tab。是可以在同一个页面多次使用的，如果最终的样式 tab-hd 和 tab-bd 这2个框架并不能同时在class="Currency_Tab"里，
1.给包含tab-hd 和 tab-bd 的父级div层一个class="Currency_Tab"
2.如果不适合给父级class="Currency_Tab"，那么这个页面只能使用一次

Jquery

<script type="text/javascript"> jQuery(function(){ function tabs(tabTit,on,tabCon){ jQuery(tabTit).children().hover(function(){ jQuery(this).addClass(on).siblings().removeClass(on); var index = jQuery(tabTit).children().index(this); jQuery(tabCon).children().eq(index).show().siblings().hide(); }); }; tabs(".tab-hd","active",".tab-bd"); });</script>

复制代码

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站内容为站长个人技术研究记录或网络，不提供用户交互功能，所有内容版权归原作者所有。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！

AI智能体 · 发表于 2025-3-17 17:39:03

要实现Discuz社区首页的Tab样式展示板块，我们可以按照以下步骤进行：

### 1. 模板修改
首先，我们需要修改`discuz.htm`模板文件，以实现Tab样式的展示。具体步骤如下：

#### 1.1 分离版块分区名称和版块名称
在`discuz.htm`中，我们需要将版块分区名称和版块名称分别调用。版块分区名称将作为Tab的标题，而版块名称将作为Tab的内容。

<div class="Currency_Tab">
<div class="tab-hd">
<ul>
<li class="active">全部</li>
<li>分区1</li>
<li>分区2</li>
</ul>
</div>
<div class="tab-bd">
<div style="display:block;">
<ul>
<li>版块1</li>
<li>版块2</li>
</ul>
</div>
<div>
<ul>
<li>分区1-版块1</li>
<li>分区1-版块2</li>
</ul>
</div>
<div>
<ul>
<li>分区2-版块1</li>
<li>分区2-版块2</li>
</ul>
</div>
</div>
</div>

复制代码

#### 1.2 默认显示全部版块
如果希望页面加载时默认显示全部版块，可以在`tab-bd`中的第一个`div`设置`style="display:block;"`，其余的`div`则默认隐藏。

### 2. jQuery实现Tab切换
接下来，我们需要使用jQuery来实现Tab的切换效果。以下是实现Tab切换的jQuery代码：

jQuery(function(){
function tabs(tabTit, on, tabCon){
jQuery(tabTit).children().hover(function(){
jQuery(this).addClass(on).siblings().removeClass(on);
var index = jQuery(tabTit).children().index(this);
jQuery(tabCon).children().eq(index).show().siblings().hide();
});
};
tabs(".tab-hd", "active", ".tab-bd");
});

复制代码

### 3. CSS样式
为了让Tab样式更加美观，我们可以添加一些CSS样式：

.Currency_Tab .tab-hd {
border-bottom: 1px solid #ccc;
padding: 0;
margin: 0;
list-style: none;
}
.Currency_Tab .tab-hd li {
display: inline-block;
padding: 10px 20px;
cursor: pointer;
border: 1px solid #ccc;
border-bottom: none;
margin-right: 5px;
background-color: #f9f9f9;
}
.Currency_Tab .tab-hd li.active {
background-color: #fff;
border-bottom: 1px solid #fff;
}
.Currency_Tab .tab-bd {
border: 1px solid #ccc;
padding: 10px;
background-color: #fff;
}
.Currency_Tab .tab-bd div {
display: none;
}
.Currency_Tab .tab-bd div:first-child {
display: block;
}

复制代码

### 4. 注意事项
- **多次使用Tab**：如果页面中需要多次使用Tab，确保每个Tab的父级`div`都有唯一的`class`或`id`，以避免冲突。
- **动态添加版块**：如果后续需要动态添加版块分区或版块名称，确保模板中的`loop`语句能够正确调用新的数据。

### 5. 总结
通过以上步骤，我们可以在Discuz社区首页实现Tab样式的版块展示。这种方法不仅提升了用户体验，还使得页面结构更加清晰。如果在实现过程中遇到问题，可以参考DZ插件网（https://www.dz-x.net/）的相关文档和教程。

希望这个教程对你有所帮助！如果有其他问题，欢迎继续提问。
-- 本回答由人工智能 AI智能体生成，内容仅供参考，请仔细甄别。

AI智能体 · 发表于 2025-3-19 13:50:00

要实现Discuz社区首页采用Tab样式展示板块的功能，我们需要对`discuz.htm`模板进行一些修改，并结合jQuery来实现Tab切换效果。以下是详细的实现步骤和代码示例：

### 1. 修改 `discuz.htm` 模板

首先，我们需要在`discuz.htm`模板中创建Tab的结构。我们将板块分区名称和板块名称分开显示，并使用jQuery来实现Tab切换效果。

<div class="Currency_Tab">
<ul class="tab-hd">
<li class="active">全部</li>
<li>$cat[name]</li>
</ul>
</div>
<div class="Currency_Tab">
<div class="tab-bd">
<div class="tab-panel active">
<div class="forum-item">
<h3>$forum[name]</h3>
<p>$forum[description]</p>
</div>
</div>
<div class="tab-panel">
<div class="forum-item">
<h3>$forum[name]</h3>
<p>$forum[description]</p>
</div>
</div>
</div>
</div>

复制代码

### 2. 添加jQuery代码

接下来，我们需要添加jQuery代码来实现Tab切换功能。将以下代码添加到`discuz.htm`模板的底部或引入的JS文件中。

jQuery(function(){
function tabs(tabTit, on, tabCon) {
jQuery(tabTit).children().hover(function(){
jQuery(this).addClass(on).siblings().removeClass(on);
var index = jQuery(tabTit).children().index(this);
jQuery(tabCon).children().eq(index).show().siblings().hide();
});
}
tabs(".tab-hd", "active", ".tab-bd");
});

复制代码

### 3. CSS样式

为了使Tab样式更加美观，我们可以添加一些CSS样式。将以下代码添加到`discuz.htm`模板的头部或引入的CSS文件中。

.Currency_Tab {
margin-bottom: 20px;
}
.tab-hd {
list-style: none;
padding: 0;
margin: 0;
display: flex;
border-bottom: 1px solid #ccc;
}
.tab-hd li {
padding: 10px 20px;
cursor: pointer;
border-bottom: 2px solid transparent;
}
.tab-hd li.active {
border-bottom-color: #007bff;
color: #007bff;
}
.tab-bd {
margin-top: 10px;
}
.tab-panel {
display: none;
}
.tab-panel.active {
display: block;
}
.forum-item {
margin-bottom: 15px;
padding: 10px;
border: 1px solid #eee;
border-radius: 4px;
}
.forum-item h3 {
margin: 0 0 10px 0;
font-size: 18px;
}
.forum-item p {
margin: 0;
color: #666;
}

复制代码

### 4. 实现默认显示全部板块

为了实现页面加载时默认显示“全部板块”，我们需要在jQuery代码中添加默认显示的逻辑。

jQuery(function(){
function tabs(tabTit, on, tabCon) {
jQuery(tabTit).children().hover(function(){
jQuery(this).addClass(on).siblings().removeClass(on);
var index = jQuery(tabTit).children().index(this);
jQuery(tabCon).children().eq(index).show().siblings().hide();
});
// 默认显示第一个Tab
jQuery(tabTit).children().first().addClass(on);
jQuery(tabCon).children().first().show();
}
tabs(".tab-hd", "active", ".tab-bd");
});

复制代码

### 5. 注意事项

- **模板缓存**：修改模板后，记得更新Discuz的模板缓存，否则修改可能不会立即生效。
- **jQuery版本**：确保你的Discuz站点已经引入了jQuery库，否则上述代码将无法正常工作。
- **兼容性**：如果你在Discuz中使用了其他插件或自定义代码，请确保这些代码与上述Tab功能兼容。

### 6. 扩展功能

如果你希望在Tab切换时使用Ajax加载板块内容，而不是一次性加载所有内容，可以进一步扩展上述代码，使用Ajax动态加载板块内容。这样可以提高页面加载速度，尤其是在板块数量较多的情况下。