부트 스트랩 탐색 모음 JQuery 부분적으로 고정

Question

그래서 내 사이트의 모든 페이지가 생성되는 템플릿이 있습니다. 여기에 내가 원하는 걸의 예 : 해당 링크 (즉 about.html 기본이 링크에 대해를 클릭 할 때) 특정 페이지로 이동하기 때문에 fiddle

, 내 사이트에, 그러나, 해당 페이지는 HTML

<div class="container"> 
    <div class="masthead"> 
     <div class="navbar"> 
      <div class="navbar-inner"> 
       <ul class="nav"> 
        <li class="active"><a href="#">Home</a></li> 
        <li><a href="#">About</a></li> 
        <li><a href="#">Calendar</a></li> 
        <li><a href="#">Contact</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</div> 

에게로드

무슨 일입니다 :
1) 내가
2) 페이지
3) Navbar를 두 번째에 대한 소개 링크 (즉, jQuery 코드를 실행)
4를 강조 about.html 기본을 지시하는 탐색 모음에서 링크에 대한을 클릭) 페이지가로드되면 Home이 활성 클래스가됩니다. again because of <li class="active"><a href="#">Home</a></li>

본질적으로 링크를 클릭하면 잠깐 강조 표시되고 집이 다시 강조 표시됩니다. 링크를 탐색 표시 줄에 강조 표시된 상태로 피들처럼 작동하게하려면 어떻게해야합니까? 이 하나

<li class="active"><a href="#">Home</a></li> 

:

Answer 1

당신의 다음 줄을 HTML에서 기본 li.active을 제거, 그래서 대체

<li><a href="#">Home</a></li> 

그런 다음 활성 리를 설정할 때보고에 의해 페이지가로드 URL은 다음과 같습니다.

$(document).ready(function(){ 
    $('.nav li a').click(function (e) { 
     $(this).parent().parent().find('.active').removeClass('active'); 
     $(this).parent().addClass('active'); 
    }).each(function() { 
     if (location.href.indexOf('about.html') && $(this).text() == 'About') { 
      $(this).parent().addClass('active'); 
     } else if (location.href.indexOf('calendar.html') && $(this).text() == 'Calendar') { 
      $(this).parent().addClass('active'); 
     } 
    }); 
});