對於靜態頁面透過當前URL對當前欄目連結高亮顯示這個技巧很多小夥伴問過墨魚,今天放一下通用程式碼給小夥伴參考:
HTML程式碼:
<iv class="nav">- < href="index.html">首頁<">
- < href="list_1.html">欄目一<">
- < href="list_2.html">欄目二<">
- < href="list_3.html">欄目三<">
JQ程式碼:
//除了首頁外當前URL對當前欄目高亮突出顯示
$(".nav li a:not(:first)").each(function(){
$this = $(this);
if($this[0].href==String(window.location)){
$this.parent().addClass("selected");
}
});
//當前URL對當前欄目高亮突出顯示
$(".nav li a").each(function(){
$this = $(this);
if($this[0].href==String(window.location)){
$this.parent().addClass("selected");
}
});
或者使用原生js程式碼:(HTML程式碼部分的class="nav"改成id="nav")