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>

      但是发现,我无法让它与二级导航很好的融入到一起,当然,这可能是我自个的原因,因为我个人对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"就是你当前导航高亮显示的样式名。

      导航的代码截图如下所示:

posted @ 2015-11-18 10:46  前端[色色]  阅读(5005)  评论(0编辑  收藏  举报