"Home"링크에 대한 활성 클래스 추가하기 JS

Question

나는 123처럼 쉽지만 현재 "활성"요소에 "활성"클래스를 동적으로 추가하는 JS가있는 Navigation이 있습니다. JS 코드를 변경하여 페이지가 홈 링크 (사용자가 페이지를 입력 할 때 표시되는 첫 번째 링크)를로드 할 때 ".active link"가 표시되도록 변경하는 방법. 여기에 제 예가 있습니다!

http://jsfiddle.net/SZ63C/

JS :

$('li a').click(function (e) { 
    e.preventDefault(); 
    $('a').removeClass('active'); 
    $(this).addClass('active'); 
}); 

홈 링크는 처음부터 "활성"클래스해야 ...

jsfiddle를 살펴보고 가능하면 제발 도와주세요 .

Answer 1

귀하의 html로 귀하의 집 링크에 활성 클래스를 추가 할 수 있습니다, 당신은 이것을 처리하는 자바 스크립트가 필요하지 않습니다. 당신의 document.ready 함수 내부 당신이 EQ를 사용할 수 있습니다 후 원하는 넣다 잘 경우

<li><a href="#Home" class="scroll active">Home</a></li> 
           //-^^^^^^--here 

..

$('.scroll:eq(0)').addClass('active'); 

fiddle here

Answer 2

$(document).ready(function(){ 
    $('li a:eq(0)').addClass("active");// here add active class on load 
    $('li a').click(function(e) { 
      e.preventDefault(); 
      $('a').removeClass('active'); 
      $(this).addClass('active'); 
     }); 
}); 

는 demo

참조 6,

참조 eq-selector

Answer 3

이 작업을 수행 할 수 있습니다

$('.scroll').first().addClass('active'); 

• 이 .first() 방법을 사용하여 첫 번째 링크를 가져옵니다.
• 그런 다음 active 클래스를 링크에 추가하십시오.

데모 : Fiddle

간단한 성능 팁 :

를 사용하여 아래의 코드 이미 클래스를 가진 링크 만에서 클래스를 제거합니다. 불필요하게 모든 링크에서 클래스를 제거 할 필요가 없습니다.

$('a.active').removeClass('active'); 

이것은 active 클래스를 가진 모든 링크를 검색 한 후 모든 링크를 확인하는 데 효율성을 증가의 범위를 줄이고, 그 클래스를 제거합니다.

Answer 4

동적 클래스를 페이지에 추가하려면 다음과 같이하십시오.

$("li a").each(function(){ 
    if($(this).attr('href').indexOf(window.location.pathname) !== -1){ 
     $(this).addClass('active'); 
     return false; // case found, break each loop; 
    } 
}); 

그렇지 않으면 당신은 단지에만 홈 링크에 추가, 결코 다른 시도하고자하는 경우 :

$("li a").first().addClass("active"); 

Answer 5

를 사용하여 문서 준비 기능과 그것으로 코드를 작성합니다. 아래 링크에서 도움을 받으십시오 : http://learn.jquery.com/using-jquery-core/document-ready/