DiscuzX1.5版块左侧添加边栏效果

本文由清尘发表于2011-05-14 00:38最后修改于2014-04-23属于Discuz分类

源文件修改部分:

找到\template\default\forum\forumdisplay.htm

查找 id=”ct”

<div id=”ct” class=”wp cl{if $_G[‘forum’][‘allowside’]} ct2{/if}” style=”width:860px;float:right;”>

之前增加以下div区为diy区域。 即可是版块左侧自已DIY内容

<div id=”bbs_menubartable”>

<!–[diy=bbs_boxA]–><div id=”bbs_boxA” class=”area”></div><!–[/diy]–>

</div>

追加CSS样式部分:

/*页尾样式附加清除浮动*/

#ft{

clear:both;}

/*增加论坛贴子列表左列DIY区域*/

#bbs_menubartable{

width:90px; float:left; overflow:hidden;}

#bbs_menubartable li{

height:28px; line-height:28px;

background:none;

padding-left:5px;

}

#bbs_menubartable a{

font-size:14px;}

===========================

补充: 高亮显示当前栏目的JS

在此页面上加入以下JS再加CSS里为 li 增加一个class名为current的样式(li.current为当前所在栏目的样式):

<script type=”text/javascript”>
function xfindAll(container, tag) {
var results = [];
function _find(_container, _tag) {
//console.log(_container, _container.nodeName, _tag);
if (_container.nodeName.toUpperCase() == _tag.toUpperCase()) {
results.push(_container);
}
var children = _container.children, len = children ? children.length : 0;
//console.log(children, len);
if (len > 0) {
for (var i=0; i<len; i++) { _find(children[i], tag); }
}
}
_find(container, tag);
return results;
}
var container = document.getElementById(‘bbs_boxA’), links = xfindAll(container, ‘a’), linkscount = links.length, url=window.location.href;
for (var i=0; i<linkscount; i++) {
var a = links[i];
if (a.href == url) {
a.parentNode.className = ‘current’;
break;
}
}
</script>