如何使用jQuery根據文件名添加類？

Question

我設計一個網站，整個具有相同的導航，但我想強調當前頁面導航。

爲此，我嘗試使用這個jQuery代碼...

$(document).ready(function() { 
var $filename = window.location.href.substr(window.location.href.lastIndexOf("/") + 1); 
var $element = $('#' + $filename); 
$($element).addClass('active'); 
}); 
}); 

..on這個HTML代碼（我給每一個不同的ID，因爲我不知道這會工作）...

<nav class="closed"> 
<a id="index" href="#">Home</a> 
<a id="index.php" href="#">About</a> 
<a id="/index.php" href="#">Forum</a> 
<a id="\index.php" href="#">Get involved</a> 
</nav> 

但是，我似乎無法得到此代碼的工作。如何根據當前的URL /文件名將類添加到具有特定ID的元素？

Answer 1

相反的：

var $element = $('#' + $filename); 
$($element).addClass('active'); 

使用

$('#' + $filename).addClass('active'); 

和替代的document.ready，使用jQuery。 整個代碼：

$(function() { 
    var filename = window.location.href.substr(window.location.href.lastIndexOf("/") + 1); 
    var element = $('#' + $filename); 
    $(element).addClass('active'); 
}); 

甚至更​​短，但難以調試：

$(function() { 
    $('#' + (window.location.pathname.split('/').pop())).addClass('active'); 
}); 

記住，你所使用的方法是vunerable的錯誤，如果用戶配備，例如，的index.php？ ID = 2。這將是明智的使用：

var filename = (window.location.pathname.split('/').pop()).split('?')[0];