아래의 부트 스트랩 탐색 바를 사용하여 jquery

-2

을 사용하는 Bootstarp navbar 활성 클래스. 활성 클래스가 잘 작동하지만 페이지가로드지고 있지 않습니다 위의 코드를 사용하면 링크 아래의 부트 스트랩 탐색 바를 사용하여 jquery

$(document).ready(function() { 
    $('ul.nav > li').click(function (e) { 
     e.preventDefault(); 
     $('ul.nav > li').removeClass('active'); 
     $(this).addClass('active'); 
    }); 
});

을 활성화 JQuery와 아래 사용

 <div class="navbar-default">    
      <ul class="nav navbar-nav navbar-right"> 
       <li> 
        <a href="Link1">Link1</a> 
       </li> 
       <li> 
        <a href="Link2">Link2</a> 
       </li> 
      </ul> 
     </div>

코멘트가있는 경우 e.preventDefault(); 페이지가로드되고 있지만 활성 클래스가 작동하지 않습니다.

출처

2016-08-03 Nirav Parmar

페이지가로드 된 후 특정 메뉴 항목에 대해 클래스를 활성화해야합니다. –

클릭 핸들러에 활성 클래스를 추가하고 있습니다. 'window.location = $ (this) .attr ('href');'를 추가하여 원하는 것을 얻을 수는 있지만 그 이유는 무엇입니까? 클래스는 페이지가 언로드되기 바로 전에 추가됩니다 (href 다음에 있음). – AVProgrammer

코드를 어떻게 보여줄 수 있습니까? –

두 가지 HTML 페이지 (page1.html 및 page2.html)가 있다고 가정 해 보겠습니다. 자바 스크립트를 무시하고 page1.html의 링크를 클릭하면 page2.html으로 이동합니다. active 클래스를 page2.html의 해당 링크로 설정하면 제대로 작동합니다 (활성 링크로 page2.html으로 연결됨).

JavaScript에서 e.preventDefault()은 기본 동작을 방지합니다. 이 경우 웹 페이지가 새 링크로 리디렉션되지 않습니다. 어떻게 든 작동하도록 만들었지 만 page2.html을로드하면 page1.html (활성 클래스 설정)에서 이전에 실행 한 JavaScript는 모두 이 아니며은 page2.html으로 전송됩니다. 그래서 자바 스크립트는 쓸모가 없다.

page1.html에 자바 스크립트를 적용하고 page2.html으로 전송하는 대신, page2.html의 활성 링크를 편집하는 것만으로 쉽게 할 수 있습니다.

출처

2016-08-17 05:53:16

아래의 부트 스트랩 탐색 바를 사용하여 jquery

답변

관련 문제