Jquery - 이름을 #tag 이름을 찾아 클래스에 적용하는 방법

Question

웹 사이트의 # page1에서 # page1의 메뉴 항목을 현재 페이지 스타일처럼 강조하고 싶습니다. 나는 클래스를 추가하고 아래 코드와 함께 CSS를 직접 적용 해 보았습니다. 둘 다 작동하지 않습니다.

누구든지 내가 뭘 잘못하고 있다고 말할 수 있습니까? 미리 감사드립니다.

var url = window.location.href; 
if (url.search("#page1") > 0) { 
$("#mainNav ul li a.scroll1").addClass("current"); 
$("#mainNav ul li a.scroll1").css("color","#000"); 
} 

Answer 1

window.location.hash을 검색하여 선택기로 사용할 수 있어야합니다. 예를 들어, 사용자가 http://localhost/index.php#page1 인 경우 창 개체에서 반환 된 해시 값은 #page1이됩니다. 당신은 당신의 요소를 검색하기 위해 그것을 사용할 수 있습니다 :

// Reference to hash, or empty string 
var page = window.location.hash; 

// If the resulting string isn't empty 
if (page.length) { 
    // Target the corresponding element, add a class 
    $("a." + page.slice(1).replace(/page/,'scroll')).addClass("selected"); 
} 

Answer 2

이 질문 후 나는이 질문에 대한 아주 간단한 해결책을 찾아 냈습니다. 아래 코드는 클릭하면 LI에 현재 페이지 클래스를 만들고 동시에 다른 메뉴 LI의 다른 모든 현재 페이지 클래스를 제거합니다.

HTML

<ul> 
<li class="scrollButton1 current"><a href="#page1">Welcome</a></li> 
<li class="scrollButton2"><a href="#page2">Education</a></li> 
<li class="scrollButton3"><a href="#page3">Triathlon</a></li> 
<li class="scrollButton4"><a href="#page4">Register</a></li> 
</ul> 

JQUERY이 도움이

$(document).ready(function(){ 
$('.scrollButton1').click(function(){$('html, body').removeClass('current'), $('#mainNav ul li.scrollButton1').addClass('current');}); 
$('.scrollButton2').click(function(){$('html, body').removeClass('current'), $('#mainNav ul li.scrollButton2').addClass('current');}); 
$('.scrollButton3').click(function(){$('html, body').removeClass('current'), $('#mainNav ul li.scrollButton3').addClass('current');}); 
$('.scrollButton4').click(function(){$('html, body').removeClass('current'), $('#mainNav ul li.scrollButton4').addClass('current');}); 
}); 

희망.