dede使用方法---用js让当前导航高亮显示
当前导航高亮显示能够提升用户体验,我也知道,大家在网上搜dede让当前导航高亮显示的方法一抓一大把,但是,并不一定适合自己的需求。就像我的需求一样,导航有个二级导航,然后需要做到让当前导航高亮显示。我最开始用的方法是dede自带的让当前导航高亮显示的方法,代码如下,其中主要实现的代码就是那一句currentstyle="<li 'menu_on'><a href='~typelink~' >~typename~</a> </li>:
<div id="menu">
<ul>
<li {dede:field name=typeid runphp="yes"}(@me=="")? @me=" class='menu_on'":@me="";{/dede:field}><a href="/">网站首页</a></li>
{dede:channel type='top' row='8' currentstyle="<li 'menu_on'><a href='~typelink~' >~typename~</a> </li>" }
<li><a href="[field:typelink/]">[field:typename/]</a></li>
{/dede:channel}
</ul>
</div>
<ul>
<li {dede:field name=typeid runphp="yes"}(@me=="")? @me=" class='menu_on'":@me="";{/dede:field}><a href="/">网站首页</a></li>
{dede:channel type='top' row='8' currentstyle="<li 'menu_on'><a href='~typelink~' >~typename~</a> </li>" }
<li><a href="[field:typelink/]">[field:typename/]</a></li>
{/dede:channel}
</ul>
</div>
但是发现,我无法让它与二级导航很好的融入到一起,当然,这可能是我自个的原因,因为我个人对php并不太熟悉,所以可能dede的二次开发牵扯到php的时候会有点阻碍。没办法了,只能用自己手上的工具另外杀一条路出来。想到用js的方法实现,百度方法也是一大堆,经过很多次尝试之后,终于找到了有用的了。代码如下:
<script type="text/javascript">
var myNav = document.getElementById("nav").getElementsByTagName("a");
for(var i=0;i<myNav.length;i++){
var links = myNav[i].getAttribute("href");
var myURL = document.location.href;
if(myURL.indexOf(links) != -1){
myNav[i].className="active";
}
}
</script>
var myNav = document.getElementById("nav").getElementsByTagName("a");
for(var i=0;i<myNav.length;i++){
var links = myNav[i].getAttribute("href");
var myURL = document.location.href;
if(myURL.indexOf(links) != -1){
myNav[i].className="active";
}
}
</script>
其中"active"就是你当前导航高亮显示的样式名。
导航的代码截图如下所示: