关于我们

完美解决织梦currentstyle属性支持 channelartlist标签

2018-12-06
0

最近应工作需要制作一个dede(织梦)模板。关于选中导航变色的效果,可是把我纠结惨了,网上方法五花八门就是解决不了我的需求。

当然,现在都有空写文章了,肯定是解决了的,下面就讲解一下我走过的坑和解决方法。

需求:选中导航栏中的一项使它背景色改变。

一、我第一个想到的就是用a:hover,没有效果

.header-menu>ul>li>a:hover{color: #fff;background: #023498;

}

此方法没有效果,暂时没有找出为何不起作用(大概是我太菜了,手动捂脸)。
 

二、使用js,当用户点击时,li标签中增加一个样式(current-menu-item),
没有效果。

$(‘.header-menu’).on(‘click’,’.menu-item’,function(){ $(this).addClass(“current-menu-item”).siblings().removeClass(“current-menu-item”); });

此方法没有效果,暂时没有找出为何不起作用。(大概是我太菜了,手动捂脸)
 

三、在网上找方法,大致都是使用dede:channel此函数中的currentstyle方法,此方法可行,但是导航就无法显示二级目录了。效果如下图。

<div id=”nav”> 
<ul> 
<li><a href='{dede:global.cfg_cmsurl/}/’ {dede:field name=typeid runphp=”yes”}(@me==””)? @me=” class=’current’ “:@me=””;{/dede:field}><span>首页</span></a></li> 
{dede:channel type=’top’ row=’4′ currentstyle=” 
<li><a class=’current’ href=’~typelink~’ ~rel~><span>~typename~</span></a></li> 
“} 
<li><a href='[field:typeurl/]’ [field:rel/]><span>[field:typename/]</span></a></li> //phpfensi.com 
{/dede:channel} 
</ul> 
</div>

导航只需要显示一级目录时,可使用此方法。
 

四、dede输出导航有两个标签
{dede:channelartlist}{/dede:channelartlist}
{dede:channel}{/dede:channel}
上面的方法是在此标签中{dede:channel}{/dede:channel}添加了currentstyle
此方法,我就只要在{dede:channelartlist}{/dede:channelartlist}此标签中添加方法就两全其美了,既能变色也能显示二级导航。

首页找到channel标签的php文件,文件地址:(include\taglib\channelartlist.lib.php

打开此文件找到下面这条代码

$pv->Fields[‘typeurl’] = GetOneTypeUrlA($typeids[$i]);

在此代码下添加如下代码

if($typeids[$i][‘id’] == $refObj->TypeLink->TypeInfos[‘id’] || $typeids[$i][‘id’] == $refObj->TypeLink->TypeInfos[‘topid’] ){
$pv->Fields[‘currentstyle’] = $currentstyle ? $currentstyle : ‘current’;
}
else{$pv->Fields[‘currentstyle’] = ”;}

 


添加这个后才能对二级栏目也起作用

然后在去导航页输出即可,输出方法如下:

{dede:channelartlist typeid=’2′ currentstyle=’current’}
<li class='{dede:field.currentstyle/}’><a href='{dede:field name=’typeurl’/}’>{dede:field name=’typename’/}</a>
<ul>
{dede:channel type=’son’ noself=’yes’}
<li><a href=”[field:typeurl/]” title=”[field:typename/]”>[field:typename/]</a</li>
{/dede:channel}
</ul>
</li>
{/dede:channelartlist}

代码展示
效果演示
部分文章来源与网络,若有侵权请联系站长删除!

推荐产品