当前导航 高亮显示能够提升用户体验，我也知道，大家在网上搜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>
|
但是发现，我无法让它与二级导航很好的融入到一起，当然，这可能是我自个的原因，因为我个人对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>
|
其中"active"就是你当前导航高亮显示的样式名。
导航的代码截图如下所示：
(责任编辑：admin) |