優(yōu)化dz x5導(dǎo)讀首頁(yè)各區(qū)域標(biāo)題展示為一行

TaC

今天，總算是微信能登錄跳轉(zhuǎn)到pc端網(wǎng)頁(yè)了，分享一下，這幾天的折騰，下面是上午折騰出來(lái)的。

使用 Trae 解決導(dǎo)讀首頁(yè)各內(nèi)容區(qū)域的展示問(wèn)題。實(shí)現(xiàn)標(biāo)題集中在一行顯示。默認(rèn)是展開(kāi)，一個(gè)標(biāo)題區(qū)一個(gè)標(biāo)題區(qū)。
Trae 解決了：

- 1.所有標(biāo)題在一行水平顯示，支持滾動(dòng)。
- 2.鼠標(biāo)劃動(dòng)到標(biāo)題上時(shí)，顯示對(duì)應(yīng)標(biāo)題下的內(nèi)容。
- 3.為標(biāo)題設(shè)置了寬度不超過(guò)21%的限制。
- 4.添加了指定的漸變背景色和圓角效果。
- 5.添加了白色1px邊框。
- 6.為"更多"鏈接設(shè)置了較小的字體和較淺的顏色。
  
下面分享原始代碼：

• <!--{if $view == 'index'}-->
•         <style type="text/css">
•                 .guide-tabs-container {
•                         display: flex;
•                         overflow-x: auto;
•                         white-space: nowrap;
•                         margin-bottom: 15px;
•                         padding: 5px;
•                 }
•                 .guide-tab {
•                         flex: 0 0 auto;
•                         width: 21%; /* 寬度不超過(guò)21% */
•                         min-width: 150px; /* 最小寬度，確保內(nèi)容不會(huì)被壓縮得太小 */
•                         padding: 10px 20px;
•                         cursor: pointer;
•                         position: relative;
•                         background: linear-gradient(132deg,rgba(235,237,240,0.85) 9.65%,rgba(233,236,238,0.5) 58.96%,rgba(254,254,255,0.87) 86.15%);
•                         border-radius: 5px;
•                         border: 1px solid white;
•                         margin-right: 10px;
•                         transition: all 0.3s ease;
•                         display: flex;
•                         justify-content: space-between;
•                         align-items: center;
•                 }
•                 .guide-tab:hover {
•                         box-shadow: 0 2px 5px rgba(0,0,0,0.1);
•                 }
•                 .guide-tab.active {
•                         background: linear-gradient(132deg,rgba(220,225,230,0.85) 9.65%,rgba(215,220,225,0.5) 58.96%,rgba(240,245,250,0.87) 86.15%);
•                         font-weight: bold;
•                 }
•                 .guide-content {
•                         display: none;
•                         padding: 15px 0;
•                 }
•                 .guide-content.active {
•                         display: block;
•                 }
•                 /* 更多鏈接樣式 */
•                 .guide-tab .more-link {
•                         font-size: 12px; /* 字體小一點(diǎn) */
•                         color: #888; /* 顏色比主標(biāo)題淺 */
•                         text-decoration: none;
•                 }
•                 .guide-tab .more-link:hover {
•                         color: #555;
•                         text-decoration: underline;
•                 }
•                 /* 隱藏滾動(dòng)條但保留功能 */
•                 .guide-tabs-container::-webkit-scrollbar {
•                         display: none;
•                 }
•                 .guide-tabs-container {
•                         -ms-overflow-style: none;
•                         scrollbar-width: none;
•                 }
•         </style>
•         <div class="guide-tabs-container">
•                 <!--{loop $data $key $list}-->
•                 <div class="guide-tab" data-target="tab-$key">
•                         <span>
•                                 <!--{if $key == 'hot'}-->{lang guide_hot}<!--{elseif $key == 'digest'}-->{lang guide_digest}<!--{elseif $key == 'newthread'}-->{lang guide_newthread}<!--{elseif $key == 'new'}-->{lang guide_new}<!--{elseif $key == 'my'}-->{lang guide_my}<!--{/if}-->
•                         </span>
•                         <a href="forum.php?mod=guide&view=$key" class="more-link">{lang more} ?</a>
•                 </div>
•                 <!--{/loop}-->
•         </div>
•         <!-- 內(nèi)容部分保持不變 -->
•         <!--{loop $data $key $list}-->
•         <div id="tab-$key" class="guide-content">
•                 <div class="xl xl2 cl">
•                         <!--{if $list['threadcount']}-->
•                                 <!--{eval $i=0;}-->
•                                 <!--{loop $list['threadlist'] $thread}-->
•                                 <!--{eval $i++;$newtd=$i%2;}-->
•                                 <li{if !$newtd} class="xl2_r"{/if}>
•                                         <em>
•                                                 <!--{if $key == 'hot'}--><span class="xi1">$thread[heats]{lang guide_attend}</span><!--{/if}-->
•                                                 <!--{if $key == 'new'}-->$thread[lastpost]<!--{/if}-->
•                                         </em>
•                                         <i>· <a href="forum.php?mod=viewthread&tid=$thread[tid]&{if $_GET['archiveid']}archiveid={$_GET['archiveid']}&{/if}extra=$extra"$thread[highlight] target="_blank">$thread[subject]</a></i> <span class="xg1"><a href="forum.php?mod=forumdisplay&fid=$thread[fid]" target="_blank">$list['forumnames'][$thread[fid]]['name']</a></span>
•                                 </li>
•                                 <!--{/loop}-->
•                         <!--{else}-->
•                                 <p class="emp">{lang guide_nothreads}</p>
•                         <!--{/if}-->
•                 </div>
•         </div>
•         <!--{/loop}-->
•         <script>
•         jQuery(document).ready(function($) {
•                 // 默認(rèn)顯示第一個(gè)標(biāo)簽的內(nèi)容
•                 $('.guide-tab').first().addClass('active');
•                 $('.guide-content').first().addClass('active');
•                 // 鼠標(biāo)劃動(dòng)顯示對(duì)應(yīng)內(nèi)容
•                 $('.guide-tab').hover(function() {
•                         // 移除所有激活狀態(tài)
•                         $('.guide-tab').removeClass('active');
•                         $('.guide-content').removeClass('active');
•                         // 添加當(dāng)前激活狀態(tài)
•                         $(this).addClass('active');
•                         var target = $(this).data('target');
•                         $('#' + target).addClass('active');
•                 });
•         });
•         </script>
  

在導(dǎo)讀首頁(yè)文件，找到：<!--{if $view == 'index'}-->，下面div標(biāo)簽，在這整個(gè)div標(biāo)簽里，<!--{else}-->上，替換上面內(nèi)容，即可。
因原始文件更改過(guò)，查看默認(rèn)模板文件好象54-83行。
其它細(xì)節(jié)，你還可以自己繼續(xù)優(yōu)化。

TaC

下面是效果截圖：

總體感覺(jué)，比一整個(gè)頁(yè)面都是標(biāo)題，來(lái)得美觀些。