97久久国产亚洲精品超碰热,成人又色又爽的免费网站,色偷偷女人的天堂a,男女高潮喷水在线观看,国内精品一线二线三线区别在哪里

<li id="hkmpw"><strike id="hkmpw"></strike></li>

Discuz! 官方交流社區(qū)

標題: 修改dz論壇首頁板塊以tab標題樣式展示 [打印本頁]

作者: TaC 時間: 前天 13:22
標題: 修改dz論壇首頁板塊以tab標題樣式展示
本帖最后由 TaC 于 2025-10-14 13:32 編輯

這是幾天前折騰出來的，分享一下。

默認文件下，多少年了，官方一直以展開整個板塊為默認方式。有時總感覺有點占用頁面空間，特別是板塊多的時候。
下面將分享由 Trae 解決的板塊展示問題。

- 1.創(chuàng)建了一個可水平滾動的標題欄，所有分區(qū)標題都集中在一行顯示；
- 2.實現(xiàn)了鼠標劃動懸停時切換顯示對應分區(qū)內容的功能；
- 3.添加了點擊標題跳轉到對應分區(qū)頁面的鏈接功能；
- 4.修復了頁面滾動、間距累積和底部間距過大等布局問題；
- 5.確保了右側邊欄的正常顯示和整體頁面布局的穩(wěn)定性。

怎么操作呢。
打開論壇首頁文件，查到：

<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;
}
/* 確保內容區(qū)域位置穩(wěn)定 */
.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為激活狀態(tài)
tabs.first().addClass('active');
// 獲取所有分區(qū)內容元素
var categoryContents = $('div[id^="category_"]');
// 保存原始分區(qū)內容到變量中，然后從DOM中移除
var contentMap = {};
categoryContents.each(function() {
var id = $(this).attr('id');
var fid = id.replace('category_', '');
contentMap[fid] = $(this).html();
$(this).remove(); // 從DOM中移除原始內容
});
// 初始顯示第一個分區(qū)內容
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);
});
// 鼠標懸停時切換分區(qū)內容 - 注意不阻止點擊事件
tabs.hover(function() {
if (isScrolling) return;
// 更新激活狀態(tài)
tabs.removeClass('active');
$(this).addClass('active');
// 獲取對應的分區(qū)ID
var tabId = $(this).attr('id');
var fid = tabId.replace('tab_', '');
// 動態(tài)加載對應的分區(qū)內容到固定容器中
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>

問題解決，當然，細節(jié)上，可能還需你自己調節(jié)，和美化一下，以適合你網站的風格。

作者: TaC 時間: 前天 13:23
以上是在已經修改的一級分類下的板塊樣式的基礎上，修改而來。由 trae AI提供的原始數(shù)據(jù)。
至于，沒有前面工作，沒測試過。

重點是，在后臺/論壇，一級板塊下的橫排數(shù)目。請根據(jù)網站需求，應對更改和使用。
上面方法真的非常簡單，添加的位置就一個地方，一步到位，不用修改其它。但是要隱藏原來標題欄代碼，即隱藏或刪除標題所在的diy標簽以內的所有代碼。

另外，便于日后管理，請駁離樣式代碼到目前使用的模板樣式文件中，其它放到論壇首頁文件里，即上面所說的文件位置里。
并做好注釋，便于日后程序升級時，方便查找，復制到升級的文件中。

作者: TaC 時間: 前天 13:24
本帖最后由 TaC 于 2025-10-14 17:01 編輯

注意，如果操作前，開啟了論壇首頁邊欄，并且，板塊下，還有DIY模塊（我原來板塊這里是刪除了的，使得的是邊欄掛件。升級x5，又整出來了）。在板塊效果出現(xiàn)后，可能右邊欄跑到下面（我在修改過的板塊邊欄添加了其它模塊，應該不是這個原因）。
并且無法移動，這時就在右邊重新DIY模塊，或添加代碼，再刪除以前的邊欄板塊。不然，當你DIY模塊后，下面的邊欄卻又跑到開始讓它去，卻不去的地方，模塊重復。
這些將根據(jù)你的模板現(xiàn)狀來操作，和調整。

所以，在決定操作前，要考慮好，整個首頁是否需要開啟邊欄，以免增加工作量。
至于原因，不詳，可能DIY模塊代碼放的位置不對，也懶得去找了。只要板塊效果達到，就可以了。

作者: TaC 時間: 前天 13:29
本帖最后由 TaC 于 2025-10-14 17:05 編輯

下面是效果圖，不包括下面的板塊信息。只是紅框里的標題優(yōu)化。

(, 下載次數(shù): 0)

板塊信息這塊，更改的地方不是一個，所以，有需要的，再說了。因為它是在其它板塊代碼基礎上，修改來的，涉及到其它代碼，樣式。

作者: 一定 時間: 昨天 22:29
地址放出來看看效果

作者: TaC 時間: 2 小時前
地址在這個回復帖子里，求助論壇的郵箱發(fā)信如何設置 - Discuz! X 教程 - Powered by Discuz! 我不一一給了，免得人家說我打廣告

歡迎光臨 Discuz! 官方交流社區(qū) (http://r615.cn/)