修改dz论坛首页板块以tab标题样式展示

TaC · 发表于昨天 13:22

这是几天前折腾出来的，分享一下。

默认文件下，多少年了，官方一直以展开整个板块为默认方式。有时总感觉有点占用页面空间，特别是板块多的时候。
下面将分享由 Trae 解决的板块展示问题。

- 1.创建了一个可水平滚动的标题栏，所有分区标题都集中在一行显示；
- 2.实现了鼠标划动悬停时切换显示对应分区内容的功能；
- 3.添加了点击标题跳转到对应分区页面的链接功能；
- 4.修复了页面滚动、间距累积和底部间距过大等布局问题；
- 5.确保了右侧边栏的正常显示和整体页面布局的稳定性。

怎么操作呢。
打开论坛首页文件，查到：

<div class="bm bmw {if $cat['forumcolumns']} flg{/if} cl">

默认文件约344行，找到它上面的这二行代码：

接着在上面添加以下代码：

<style type="text/css">
/* 分类标签容器 */
.category-tabs-wrapper {
width: 100%;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
margin: 10px 0;
padding: 5px 0;
position: relative;
clear: both;
}
/* 滚动条样式 */
.category-tabs-wrapper::-webkit-scrollbar {
height: 6px;
}
.category-tabs-wrapper::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 3px;
}
.category-tabs-wrapper::-webkit-scrollbar-thumb {
background: #888;
border-radius: 3px;
}
.category-tabs-wrapper::-webkit-scrollbar-thumb:hover {
background: #555;
}
/* 分类标签样式 */
.category-tab {
display: inline-block;
padding: 8px 12px;
margin-right: 6px;
background: #f5f5f5;
border-radius: 3px;
cursor: pointer;
min-width: 80px;
text-align: center;
transition: all 0.2s ease;
box-sizing: border-box;
}
.category-tab:hover {
background: #e8e8e8;
}
.category-tab.active {
background: #0066cc;
color: white;
}
.category-tab a {
text-decoration: none;
font-weight: bold;
display: block;
font-size: 13px;
}
.category-tab.active a {
color: white;
}
/* 内容容器 - 调整底部间距 */
.category-content-container {
position: relative;
margin: 15px 0 0 0; /* 只保留上边距，移除下边距 */
clear: both;
min-height: 200px; /* 减小最小高度 */
padding-bottom: 0; /* 确保没有底部内边距 */
}
/* 确保右侧边栏正常显示 */
#sd {
float: right !important;
display: block !important;
}
/* 确保内容区域位置稳定 */
.bm {
position: relative;
clear: both;
margin-bottom: 0 !important; /* 强制移除底部边距 */
}
#ct {
position: relative;
clear: both;
}
/* 修复底部间距问题的关键样式 */
.category-content-container + * {
margin-top: 10px !important; /* 限制内容容器后的元素上边距 */
}
/* 移除可能的多余空元素 */
.category-content-container .bm {
margin-bottom: 0 !important;
}
</style>
<div class="category-tabs-wrapper" id="category-tabs">
<div class="category-tab" id="tab_$cat[fid]">
<a href="forum.php?gid=$cat[fid]">$cat[name]</a>
</div>
</div>
<div class="category-content-container" id="content-container">
</div>
<script type="text/javascript">
jQuery(function($) {
// 计算每个tab的百分比宽度
var tabs = $('.category-tab');
var tabCount = tabs.length;
// 为每个tab设置宽度
tabs.each(function() {
var percentWidth = Math.min(20, Math.max(10, 80 / tabCount));
$(this).css('width', percentWidth + '%');
});
// 设置第一个tab为激活状态
tabs.first().addClass('active');
// 获取所有分区内容元素
var categoryContents = $('div[id^="category_"]');
// 保存原始分区内容到变量中，然后从DOM中移除
var contentMap = {};
categoryContents.each(function() {
var id = $(this).attr('id');
var fid = id.replace('category_', '');
contentMap[fid] = $(this).html();
$(this).remove(); // 从DOM中移除原始内容
});
// 初始显示第一个分区内容
if (tabs.length > 0) {
var firstTabId = tabs.first().attr('id');
var firstFid = firstTabId.replace('tab_', '');
if (contentMap[firstFid]) {
$('#content-container').html(contentMap[firstFid]);
// 移除内容中可能导致间距过大的元素
$('#content-container .bm').css('margin-bottom', '0');
}
}
// 添加触摸滑动支持
var isScrolling = false;
var startX, endX;
$('#category-tabs').on('touchstart', function(e) {
startX = e.originalEvent.touches[0].clientX;
isScrolling = true;
});
$('#category-tabs').on('touchend', function(e) {
endX = e.originalEvent.changedTouches[0].clientX;
var diff = startX - endX;
if (Math.abs(diff) > 50) {
$(this).scrollLeft($(this).scrollLeft() + diff);
}
setTimeout(function() { isScrolling = false; }, 100);
});
// 鼠标悬停时切换分区内容 - 注意不阻止点击事件
tabs.hover(function() {
if (isScrolling) return;
// 更新激活状态
tabs.removeClass('active');
$(this).addClass('active');
// 获取对应的分区ID
var tabId = $(this).attr('id');
var fid = tabId.replace('tab_', '');
// 动态加载对应的分区内容到固定容器中
if (contentMap[fid]) {
$('#content-container').html(contentMap[fid]);
// 移除内容中可能导致间距过大的元素
$('#content-container .bm').css('margin-bottom', '0');
}
});
// 为链接添加单独的点击处理，确保正常跳转
$('.category-tab a').on('click', function(e) {
// 这里不需要阻止默认行为，允许链接正常跳转
// 用户点击时会跳转到forumdisplay页面
});
// 添加键盘左右键支持
$(document).keydown(function(e) {
if (e.keyCode == 37) {
$('#category-tabs').scrollLeft($('#category-tabs').scrollLeft() - 200);
} else if (e.keyCode == 39) {
$('#category-tabs').scrollLeft($('#category-tabs').scrollLeft() + 200);
}
});
});
</script>

问题解决，当然，细节上，可能还需你自己调节，和美化一下，以适合你网站的风格。

TaC · 发表于昨天 13:23

以上是在已经修改的一级分类下的板块样式的基础上，修改而来。由 trae AI提供的原始数据。
至于，没有前面工作，没测试过。

重点是，在后台/论坛，一级板块下的横排数目。请根据网站需求，应对更改和使用。
上面方法真的非常简单，添加的位置就一个地方，一步到位，不用修改其它。但是要隐藏原来标题栏代码，即隐藏或删除标题所在的diy标签以内的所有代码。

另外，便于日后管理，请驳离样式代码到目前使用的模板样式文件中，其它放到论坛首页文件里，即上面所说的文件位置里。
并做好注释，便于日后程序升级时，方便查找，复制到升级的文件中。

TaC · 发表于昨天 13:24

本帖最后由 TaC 于 2025-10-14 17:01 编辑

注意，如果操作前，开启了论坛首页边栏，并且，板块下，还有DIY模块（我原来板块这里是删除了的，使得的是边栏挂件。升级x5，又整出来了）。在板块效果出现后，可能右边栏跑到下面（我在修改过的板块边栏添加了其它模块，应该不是这个原因）。
并且无法移动，这时就在右边重新DIY模块，或添加代码，再删除以前的边栏板块。不然，当你DIY模块后，下面的边栏却又跑到开始让它去，却不去的地方，模块重复。
这些将根据你的模板现状来操作，和调整。

所以，在决定操作前，要考虑好，整个首页是否需要开启边栏，以免增加工作量。
至于原因，不详，可能DIY模块代码放的位置不对，也懒得去找了。只要板块效果达到，就可以了。

TaC · 发表于昨天 13:29

本帖最后由 TaC 于 2025-10-14 17:05 编辑

下面是效果图，不包括下面的板块信息。只是红框里的标题优化。

板块信息这块，更改的地方不是一个，所以，有需要的，再说了。因为它是在其它板块代码基础上，修改来的，涉及到其它代码，样式。

修改dz论坛首页板块以tab标题样式展示

相关帖子

产品服务

开发者服务

使用教程