jquery/js透過當前URL對當前欄目連結高亮顯示

一品神仙發表於2024-10-31


對於靜態頁面透過當前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")

相關文章