부트 스트랩 탐색 표시 줄에서 .active 상태를 변경할 수없는 이유는 무엇입니까?

Question

저는 부트 스트랩과 jquery의 초보자입니다. navbar의 .active를 바꾸기 위해 jquery를 사용할 수 없습니다.

헤드 섹션에서 부트 스트랩 및 jquery를 가져 왔습니다.

<link href="./dist/css/bootstrap.min.css" rel="stylesheet"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="./dist/js/bootstrap.min.js"></script> 

여기에 내 코드

<div class="navbar-wrapper"> 
    <div class="container"> 

    <nav class="navbar navbar-default navbar-static-top"> 
     <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
      <li ><a href="#">Home</a></li> 
      <li class="active"><a href="http://ezcourse.nctu.me/">Tutorial</a></li> 
      <li><a href="#contact">Contact</a></li> 
      </ul> 
     </div> 
     </div> 
    </nav> 

    </div> 
</div> 

이 내 JS 코드입니다. 내가 < > 태그 다른 클릭하면

$(function() { 
    $(".nav a").on("click", function(){ 
     $(".nav").find(".active").removeClass("active"); 
     $(this).parent().addClass("active"); 
    }); 
}); 

는 .active는 상태가 변경되지 않았습니다.

내가 봤 나는 Bootstrap navbar Active State not working

그러나, 나는이 코드를 복사하려고 내 코드에 붙여 넣기이 예제를 찾을 수 있습니다. jsfiddle example 여전히 작동하지 않았습니다.

그러나 웹 페이지에서 작동 할 수 있습니다.

나는이 문제를 해결하는 방법을 모른다 ...

Answer 1

친애하는 당신의 헤더 파일이 제대로 여기에 연결되어 있지 않습니다.

한 번에 확인하시기 바랍니다 이것을 시도 ..

$(function() { 
 
    $(".nav a").on("click", function(){ 
 
     $(".nav").find(".active").removeClass("active"); 
 
     $(this).parent().addClass("active"); 
 
    }); 
 
});

<link href="./dist/css/bootstrap.min.css" rel="stylesheet"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="./dist/js/bootstrap.min.js"></script> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 

 
<div class="navbar-wrapper"> 
 
    <div class="container"> 
 

 
    <nav class="navbar navbar-default navbar-static-top"> 
 
     <div class="container"> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      </button> 
 
     </div> 
 
     <div id="navbar" class="navbar-collapse collapse"> 
 
      <ul class="nav navbar-nav"> 
 
      <li ><a href="#">Home</a></li> 
 
      <li class="active"><a href="http://ezcourse.nctu.me/">Tutorial</a></li> 
 
      <li><a href="#contact">Contact</a></li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </nav> 
 

 
    </div> 
 
</div>