jQuery를 사용하여 파일 이름을 기반으로 클래스를 추가하려면 어떻게해야합니까?

Question

전체적으로 동일한 내비게이션을 사용하는 웹 사이트를 디자인하고 있지만 내비게이션에서 현재 페이지를 강조하고 싶습니다. 이를 위해

, 나는이 HTML 코드 (내가 일하는 것이 확실하지 않았다 나는 각각 다른 ID를 준) ..on ...이 jQuery 코드를 사용하여

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

을 시도 ...

<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'); 
}); 

심지어 짧은,하지만 열심히 : 사용자가 예를 들어, index.php를 위해 함께 제공하는 경우

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

당신이 사용하고있는 방법은 오류 vunerable 것을 기억 하는가? id = 2.

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