當前導航高亮顯示能夠提升用戶體驗，我也知道，大家在網上搜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"就是你當前導航高亮顯示的樣式名。
導航的代碼截圖如下所示：
