dede織夢模板用js查找法實現當前欄目樣式的高亮顯示的教程

2024-07-12 09:05:12

字體：大中小

來源：轉載

供稿：網友

判斷當前URL對當前欄目高亮突出顯示,重點是用indexOf來判斷兩個字符串中第一次出現的位置,如果沒有出現就返回-1,出現就返回
其它,并與返回其它結果的那個字符串所在元素定義一個class樣式。
頁面HTML代碼如下：

<div id="nav"> <ul> <li><a href="http://CUOxin.com/2015/muban"><span>模板超市</span></a></li> <li><a href="http://CUOxin.com/2015/chajian"><span>插件下載</span></a></li> <li><a href="http://CUOxin.com/2015/edu"><span>建站教程</span></a></li> <li><a href="http://CUOxin.com/2015/video"><span>視頻教程</span></a></li><li><a href="http://CUOxin.com/2015/js"><span>特效下載</span></a></li> <li><a href="http://CUOxin.com/2015/sucai"><span>站長素材</span></a></li> <li><a href="http://CUOxin.com/2015/kuzhan"><span>酷站欣賞</span></a></li> <li><a href="http://CUOxin.com/2015/down"><span>源碼下載</span></a></li> </ul> </div>

頁面JS腳本如下：
var myNav = document.getElementById("nav").getElementsByTagName("a"); for(var i=0;i<myNav.length;i++){ var links = myNav[i].getAttribute("href"); //alert(links); //alert(myNav[i]); var myURL = document.location.href; if(myURL.indexOf(links) != -1){ myNav[i].className="d"; } }

比如：點擊“資訊中心”之后，URL地址變成 http://CUOxin.com/2015/muban ，而使用 document.location.href 取得的就是這個地址。然后我們再遍歷當前查找到的所有a連接，取得每個連接href的值。遍歷的代碼：
var myNav = document.getElementById("nav").getElementsByTagName("a");
for(var i=0;i<myNav.length;i++){
var links = myNav[i].getAttribute("href");
}
使用indexOf函數來比較是否頁面的所有連接中，是否有當前頁的URL地址出現。若有的話，就表明是當前欄目，那么就修改當前連接的樣式。這就實現了當前欄目高亮顯示，當前欄目高亮顯示是一個很實用的技巧，在增加用戶體驗方面尤其有好處。但在實用過程中，可能需要注意一些細節問題，比如網站是用外鏈的方式來連接的，那么在處理的時候，點了這個外鏈的
時候就可能出現問題，呵呵。

上一篇：織夢模板dede留言本類的plus插件如何調用標簽或頭部尾部

下一篇：織夢模板列表頁如何實現多行列表調用標簽的教程