优化dz x5导读首页各区域标题展示为一行 New
今天，总算是微信能登录跳转到pc端网页了，分享一下，这几天的折腾，下面是上午折腾出来的。使用 Trae解决导读首页各内容区域的展示问题。实现标题集中在一行显示。默认是展开，一个标题区一个标题区。
Trae 解决了：
- 1.所有标题在一行水平显示，支持滚动。
- 2.鼠标划动到标题上时，显示对应标题下的内容。
- 3.为标题设置了宽度不超过21%的限制。
- 4.添加了指定的渐变背景色和圆角效果。
- 5.添加了白色1px边框。
- 6.为"更多"链接设置了较小的字体和较浅的颜色。
下面分享原始代码：
<!--{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%; /* 宽度不超过21% */ min-width: 150px; /* 最小宽度，确保内容不会被压缩得太小 */ 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; /* 字体小一点 */ color: #888; /* 颜色比主标题浅 */ text-decoration: none; } .guide-tab .more-link:hover { color: #555; text-decoration: underline; } /* 隐藏滚动条但保留功能 */ .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> <!-- 内容部分保持不变 --> <!--{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{lang guide_attend}</span><!--{/if}--> <!--{if $key == 'new'}-->$thread<!--{/if}--> </em> <i>· <a href="forum.php?mod=viewthread&tid=$thread&{if $_GET['archiveid']}archiveid={$_GET['archiveid']}&{/if}extra=$extra"$thread target="_blank">$thread</a></i> <span class="xg1"><a href="forum.php?mod=forumdisplay&fid=$thread" target="_blank">$list['forumnames'][$thread]['name']</a></span> </li> <!--{/loop}--> <!--{else}--> <p class="emp">{lang guide_nothreads}</p> <!--{/if}--> </div> </div> <!--{/loop}--> <script> jQuery(document).ready(function($) { // 默认显示第一个标签的内容 $('.guide-tab').first().addClass('active'); $('.guide-content').first().addClass('active'); // 鼠标划动显示对应内容 $('.guide-tab').hover(function() { // 移除所有激活状态 $('.guide-tab').removeClass('active'); $('.guide-content').removeClass('active'); // 添加当前激活状态 $(this).addClass('active'); var target = $(this).data('target'); $('#' + target).addClass('active'); }); }); </script>
在导读首页文件，找到：<!--{if $view == 'index'}-->，下面div标签，在这整个div标签里，<!--{else}-->上，替换上面内容，即可。
因原始文件更改过，查看默认模板文件好象54-83行。
其它细节，你还可以自己继续优化。 下面是效果截图：
总体感觉，比一整个页面都是标题，来得美观些。
页:
[1]