给discuz论坛自带的首页四格添加tab切换功能

DZ论坛台自带的首页四格其实还是蛮不错的,该有的基本上都有,最新图片、最新主题、最新回帖、精华帖、热门帖,如果没特别的要求,拿来用还是不错的。但首页四格的排版是平铺式的,左中右这样分三块,要加点内容都不好加。如果想把最新主题、最新回帖、精华帖、热门帖全放上去,是不行的,没那么多地方。如果是TAB切换模式就好了,大家重叠在一起,不占用横向地方。
其实TAB代码在网络上有很多,随便找一个来就可以用。我用的这个是一个页面可时显示多个TAB的,显示一个也行。只需要加JS代码,再把原来的首页四格代码改一下id,再添加CSS就可以了。
JS代码主要是这样的:

<script>
function setTab(m,n){
var tli=document.getElementById("menu"+m).getElementsByTagName("li");
var mli=document.getElementById("main"+m).getElementsByTagName("ul");
for(i=0;i<tli.length;i++){
tli[i].className=i==n?"hover":"";
mli[i].style.display=i==n?"block":"none";
}
}
</script>

CSS代码这样写就够了:

.indextabs{}
.indextabs dt{height:24px;clear:both;border-left:1px solid #5FA39E;border-bottom:1px solid #5FA39E;background:#C8E6E1;}
.indextab_menu {padding-left: 7px;}
.indextab_menu li{float:left;display:block;cursor:pointer; margin: 0 0 -1px 0;padding:0 10px;text-align:center;height:24px;line-height:24px;color:#555;border-right:1px solid #5FA39E;}
.indextab_menu li a{color:#555;display:block;}
.indextab_menu li.hover {height:25px;line-height:25px;padding:0 10px;border-right:1px solid #5FA39E;border-bottom:none;background:#fff !important;color:#000;}
.indextab_menu li.hover a {color:#000;display:block;}
.indextabs dd{height:170px;padding: 4px 6px;overflow:hidden;border-left:1px solid #5FA39E;}
.indextabs dd li { background:url({IMGDIR}/dot.gif) no-repeat left center; height: 21px; line-height:21px; overflow: hidden; padding-left:10px; }
.indextabs dd em { float:right; }
.indextabs dd cite { color:#999; }
.block {display:block;}
.none {display:none;}

然就是把DZ的首页模板文件\template\default\forum\discuz.htm中原来的首页四格中要TAB切换的那些代码略微改一下,比如最新图片就可以不改,只改最新主题、最新回帖那些。改成这样的格式:

<td valign="top" class="category_l2">
<div class="indextabs">
<dt>
<ul id="menu1" class="indextab_menu">
<li class="hover" onMouSEOver="setTab(1,0)">最新主题</li>
<li onMouseOver="setTab(1,2)">热门帖</li>
</ul>
</dt>
<dd id="main1">
<ul class="block">
<!--{loop $grids['newthread'] $thread}-->
<li><em><a href="home.php?mod=space&uid=$thread[authorid]" target="_blank" class="xg4">$thread[author]</a></em><a href="forum.php?mod=viewthread&tid=$thread[tid]&extra=$extra" target="_blank">$thread[subject]</a></li>
<!--{/loop}-->
</ul>
<ul class="none">
<!--{loop $grids['hot'] $thread}-->
<li><em><a href="home.php?mod=space&uid=$thread[authorid]" target="_blank" class="xg4">$thread[author]</a></em><a href="forum.php?mod=viewthread&tid=$thread[tid]&extra=$extra" target="_blank">$thread[subject]</a></li>
<!--{/loop}-->
</ul>
</dd>
</div>
</td>

这就是一个比较完整的TAB切换式的首页四格了。这个TAB是可以多次使用的,只需要把menu1改为menu2或menu3就都有效。比如左边是最新图片,中间是最新主题/最新回帖/精华帖/热门帖,右边是帖排行/活跃员。
每个论坛的具体况不一样,我的三个DZ论坛,首页四格的代码全都是不的。以上给出了一个基本思路,有能力的站长应该可以修改自用。
转自格东站长网

未经允许不得转载:地下室先生博客 » 给discuz论坛自带的首页四格添加tab切换功能

赞 (0) 打赏作者

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏