[javascript] 부트 스트랩 navbar 활성 상태가 작동하지 않음

Question 1

부트 스트랩 v3이 있습니다.

나는를 사용하여 class="active"내에서 navbar내가 메뉴 항목을 누르면이 전환되지 않습니다. 이 작업을 수행 jQuery하고 클릭 기능을 구축하는 방법을 알고 있지만이 기능이 부트 스트랩에 포함되어야한다고 생각합니까? 그렇다면 JavaScript 문제일까요?

다음은 포함 된 js / css / bootstrap 파일이있는 헤더입니다.

<!-- Bootstrap CSS -->
<link rel="stylesheet" href= "/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href= "/stylesheets/styles.css" />

<!--jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

<!-- Bootstrap JS -->
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script src="/bootstrap/js/bootstrap-collapse.js"></script>
<script src="/bootstrap/js/bootstrap-transition.js"></script>

내 navbar코드 는 다음과 같습니다 .

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbarCollapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <a class="navbar-brand" href="/index.php">MyBrand</a>
            </div>

            <div class="collapse navbar-collapse navbarCollapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active">
                        <a href="/index.php">Home</a>
                    </li>

                    <li>
                        <a href="/index2.php"> Links</a>
                    </li>

                    <li>
                        <a href="/history.php">About</a>
                    </li>
                    <li>
                        <a href="/contact.php">Contact</a>
                    </li>

                    <li>
                        <a href="/login.php">Login</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

내가 올바르게 설정하고 있습니까?

(관련이없는 메모이지만 관련이있을 수 있습니까? 메뉴가 이동 될 때 메뉴 버튼을 클릭하면 축소됩니다. 다시 누르면 축소가 해제되지 않습니다. 따라서이 문제는 두 가지 모두 잘못된 JavaScript 설정을 의미합니다. 혹시?)

Question 2

문서에 다음과 같이 명시되어있는 동안 축소 된 부트 스트랩 js 파일 및 축소 / 전환 플러그인을 포함했습니다.

bootstrap.js와 bootstrap.min.js는 모두 단일 파일에 모든 플러그인을 포함합니다.
하나만 포함하십시오.

과

간단한 전환 효과의 경우 다른 JS 파일과 함께 transition.js를 한 번 포함합니다. 컴파일 된 (또는 축소 된) bootstrap.js를 사용하는 경우이를 포함 할 필요가 없습니다. 이미 포함되어 있습니다.

따라서 최소화 문제에 대한 문제가 될 수 있습니다.

활성 클래스의 경우 직접 관리해야하지만 한두 줄이면됩니다.

부트 스트랩 3 :

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

Bootply : http://www.bootply.com/IsRfOyf0f9

부트 스트랩 4 :

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

Question 3

다음은 활성 페이지 전환을위한 솔루션이었습니다.

$(document).ready(function() {
  $('li.active').removeClass('active');
  $('a[href="' + location.pathname + '"]').closest('li').addClass('active');
});

Question 4

이것은 “window.location.pathname”이 실제 페이지 이름 앞에 데이터를 포함하기 때문에 완벽하게 작동했습니다 (예 : directory / page.php). 따라서 실제 navbar 링크는 URL에이 링크가 포함 된 경우에만 활성화됩니다.

$(document).ready(function() {
    $.each($('#navbar').find('li'), function() {
        $(this).toggleClass('active',
            window.location.pathname.indexOf($(this).find('a').attr('href')) > -1);
    });
});

Question 5

3.3.4 버전의 부트 스트랩을 사용하면 긴 html 페이지에서 pg의 섹션을 참조 할 수 있습니다. body 요소로 spy-scroll로 활성 navbar 링크를 관리하려면 클래스 또는 ID별로 :

  <body data-spy="scroll" data-target="spy-scroll-id">

데이터 타겟은 id = “spy-scroll-id”인 div가됩니다.

    <div id="spy-scroll-id" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#topContainer">Home</a></li>
        <li><a href="#details">About</a></li>
        <li><a href="#carousel-container">SlideShow</a></li>
      </ul>
    </div>

이렇게하면 자바 스크립트 기능없이 클릭하여 링크를 활성화해야하며 js onclick ()이 수행하지 않는 페이지의 해당 링크 섹션을 스크롤 할 때 각 링크도 자동으로 활성화됩니다.

Question 6

다음 과 같이 부트 스트랩 내비게이션 내 링크 에 data-toggle = “tab” 을 추가 하기 만하면됩니다 .

<ul class="nav navbar-nav">
  <li class="active"><a data-toggle="tab" href="#">Home</a></li>
  <li><a data-toggle="tab" href="#">Test</a></li>
  <li><a data-toggle="tab" href="#">Test2</a></li>
</ul>

Question 7

앵커 링크를 사용하지 않는 경우 다음과 같이 사용할 수 있습니다.

$(document).ready(function () {
    $.each($('#navbar').find('li'), function() {
        $(this).toggleClass('active',
            '/' + $(this).find('a').attr('href') == window.location.pathname);
    });
});

Question 8

Bootstrap 4에서는 다음을 사용할 수 있습니다.

$(document).ready(function() {
    $(document).on('click', '.nav-item a', function (e) {
        $(this).parent().addClass('active').siblings().removeClass('active');
    });
});

[javascript] 부트 스트랩 navbar 활성 상태가 작동하지 않음

답변

답변

답변

답변

답변

답변

답변