Bootstrap navbar Active State не работает

У меня есть bootstrap 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, возможно?)

Ответ 1

Вы включили минимизированный файл Bootstrap js и плагины свертывания/перехода, в то время как документы утверждают, что:

Как bootstrap.js, так и bootstrap.min.js содержат все плагины в одном файле.
Включите только один.

а также

Для простых эффектов перехода включите файл transition.js один раз вместе с другими файлами JS. Если вы используете скомпилированный (или минимизированный) файл bootstrap.js, нет необходимости включать его - он уже есть.

Так что это может быть вашей проблемой для проблемы минимизации.

Для активного класса вы должны сами управлять им, но это всего лишь строка или две.

Бутстрап 3:

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

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

Bootstrap 4:

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

Ответ 2

Вот мое решение для переключения активных страниц

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

Ответ 3

Это работает для меня, потому что "window.location.pathname" также содержит данные до имени реальной страницы, например. Каталог /page.php. Таким образом, фактическая навигационная ссылка будет установлена только на активную, если URL-адрес содержит эту ссылку.

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

Ответ 4

С версией загрузочного файла 3.3.4 на длинных страницах html вы можете обратиться к разделам pg. по классу или идентификатору для управления активной навигационной связью с помощью spy-scroll с элементом body:

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

Целью данных будет div с id = "spy-scroll-id"

    <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>

Это должно активировать ссылки, щелкнув без каких-либо функций javascript, а также автоматически активирует каждую ссылку при прокрутке соответствующих связанных разделов страницы, на которые не работает js onclick().

Ответ 5

Если вы не используете привязные ссылки, вы можете использовать что-то вроде этого:

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

Ответ 6

Все, что вам нужно сделать, это просто добавить data-toggle = "tab" к вашей ссылке внутри бутстрапа navbar следующим образом:

<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>

Ответ 7

С помощью Bootstrap 4 вы можете использовать это:

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

Ответ 8

Это элегантное решение сделало трюк для меня. Любые новые идеи/предложения приветствуются.

$( document ).on( 'click', '.nav-list li', function ( e ) {
    $( this ).addClass( 'active' ).siblings().removeClass( 'active' );
} );

Вы можете использовать метод jibuery "siblings()", чтобы сохранить активным только элемент доступа и его братья и сестры.

Ответ 9

Я борюсь с этим сегодня, data-togle работает только в том случае, если я нахожусь в одном приложении.

Я не использую ajax для загрузки содержимого, на котором я фактически отправляю запрос на другие страницы, поэтому первый js script тоже бесполезен. Я решаю это с помощью следующих строк:

var active = window.location.pathname;
$(".nav a[href|='" + active + "']").parent().addClass("active");

Ответ 10

Я надеюсь, что это поможет решить эту проблему.

      var navlnks = document.querySelectorAll(".nav a");
        Array.prototype.map.call(navlnks, function(item) {

            item.addEventListener("click", function(e) {

                var navlnks = document.querySelectorAll(".nav a"); 

                Array.prototype.map.call(navlnks, function(item) {

                    if (item.parentNode.className == "active" || item.parentNode.className == "active open" ) {

                        item.parentNode.className = "";

                    } 

                }); 

                e.currentTarget.parentNode.className = "active";
            });
        });

Ответ 11

У меня была боль в этом, используя динамически созданные элементы списка - WordPress Stack.

Добавлено это, и он работал:

$(document).ready(function () {
    $(".current-menu-item").addClass("active");
});

Будет делать это на лету.

Ответ 12

Класс "active" не управляется из коробки с помощью бутстрапа. В вашем случае, поскольку вы используете PHP, вы можете видеть:

Как добавить class= 'active' в html-меню с php

чтобы помочь вам с помощью метода автоматизации.

Ответ 13

Для того, чтобы меню быстрого передвижения было отключено после нажатия элемента, вы можете использовать этот

$("ul.nav.navbar-nav li a").click(function() {    

    $(".navbar-collapse").removeClass("in");
});

Ответ 14

Я использую bootstrap bare theme, вот пример кода навигатора. Обратите внимание на имя класса элемента → .nav - как это указано в java script.

/ Collect the nav links, forms, and other content for toggling
    #bs-example-navbar-collapse-1.collapse.navbar-collapse
      %ul.nav.navbar-nav
        %li
          %a{:href => "/demo/one"} Page One
        %li
          %a{:href => "/demo/two"} Page Two
        %li
          %a{:href => "/demo/three"} Page Three

на странице просмотра (или частичном) добавить это: javascript, это нужно выполнять каждый раз, когда загружается страница.

haml view snippet →

- content_for :javascript do
  :javascript
      $(function () {
          $.each($('.nav').find('li'), function() {
              $(this).toggleClass('active',
                  $(this).find('a').attr('href') == window.location.pathname);
          });
      });

В отладчике javascript убедитесь, что значение атрибута 'href' соответствует имени window.location.pathname. Это немного отличается от решения @Zitrax, которое помогло мне решить мою проблему.

Ответ 15

Для AngularJS вы можете использовать ng-class с помощью следующей функции:

HTML →

<nav class="navbar navbar-default" ng-controller="NavCtrl as vm">
  <div class="container">
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav" >
        <li ng-class="vm.Helper.UpdateTabActive('Home')"><a href="#" ng-click>Home</a></li>
        <li ng-class="vm.Helper.UpdateTabActive('About')"><a href="#about">About</a></li>
        <li ng-class="vm.Helper.UpdateTabActive('Contact')"><a href="#contact">Contact</a></li>        
      </ul>
    </div>
</nav>

И контроллер

app.controller('NavCtrl', ['$scope', function($scope) {
    var vm = this;
    vm.Helper = {
        UpdateTabActive: function(sTab){
            return window.location.hash && window.location.hash.toLowerCase() == ("#/" + sTab).toLowerCase() ? 'active' : '';
        }
    }    
}]);

Если вы используете $location, тогда не будет хеша. Таким образом, вы можете извлечь нужную строку из URL, используя $location

Следующее не будет работать во всех случаях →

Использование переменной области видимости, как показано ниже, будет работать только при нажатии, но если переход выполняется с помощью $state.transitionTo или window.location или вручную обновляет URL-адрес, значение Tab не будет обновляться

<ul class="nav navbar-nav" ng-init="Tab='Home'">
   <li ng-class="Tab == 'Home' ? 'active' : ''"><a href="#" ng-click="Tab = 'Home'">Home</a></li>
   <li ng-class="Tab == 'About' ? 'active' : ''"><a href="#" ng-click="Tab = 'About'">About</a></li>
</ul>

Ответ 16

Добавьте этот JavaScript в ваш основной файл js.

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

Ответ 17

Мне пришлось сделать шаг вперед, потому что имена моих файлов не совпадали с названиями навигационной панели. т.е. моя первая навигационная ссылка была HOME, но имя файла - index..

Так что просто возьмите путь и сопоставьте его.

Очевидно, что это грубый пример, и он может быть более эффективным, но это очень индивидуальная необходимость.

var loc_path = location.pathname;
$('li.active').removeClass('active');



if(loc_path.includes('index')){
    $('li :eq(0)').addClass('active');
}else if(loc_path.includes('blog')){
    $('li :eq(2)').addClass('active');
}else if(loc_path.includes('news')){
    $('li :eq(3)').addClass('active');
}else if(loc_path.includes('house')){
    $('li :eq(4)').addClass('active');
}

Ответ 18

Решение Bootstrap 4, которое работало для меня:

$(document).ready(function() {
//You can name this function anything you like
function activePage(){
//When user lands on your website location.pathname is equal to "/" and in 
//that case it will add "active" class to all links
//Therefore we are going to remove first character "/" from the pathname
  var currentPage = location.pathname;
  var slicedCurrentPage = currentPage.slice(1);
//This will add active class to link for current page
  $('.nav-link').removeClass('active');
  $('a[href*="' + location.pathname + '"]').closest('li').addClass('active');
//This will add active class to link for index page when user lands on your website
     if (location.pathname == "/") {
         $('a[href*="index"]').closest('li').addClass('active');
    }
}
//Invoke function
activePage();
});

Это будет работать только если href содержит location.pathname !

Если вы тестируете свой сайт на своем собственном компьютере (используя wamp, xampp, lamp и т.д.) И ваш сайт находится в какой-то подпапке, тогда ваш путь на самом деле "/somefolder/something.php", поэтому не получайте смущенный.

Я бы посоветовал, если вы не уверены, использовать следующий код, чтобы вы могли убедиться в правильности имени location.pathname:

$(document).ready(function() {
  alert(location.pathname);
});

Ответ 19

Я пришел с той же проблемой, и решение Pete TNT для меня не сработало. Вместо этого я внес некоторые изменения (для Bootstrap 4):

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

return false;
});

Надеюсь, это поможет кому-то еще!

Ответ 20

Следующий ответ для тех, кто имеет многоуровневое меню:

var url = window.location.href;

var els = document.querySelectorAll(".dropdown-menu a");
for (var i = 0, l = els.length; i < l; i++) {
    var el = els[i];
    if (el.href === url) {
       el.classList.add("active");
       var parent = el.closest(".main-nav"); // add this class for the top level "li" to get easy the parent
       parent.classList.add("active");
    }
}

Ответ 21

Как человек, который не знает javascript, здесь PHP-метод, который работает для меня и прост для понимания. Вся моя панель навигации находится в функции PHP, которая находится в файле общих компонентов, которые я включаю со своих страниц. Так, например, на моей странице index.php у меня есть...

<?php
   $calling_file = basename(__FILE__);
   include 'my_common_includes.php';    // Going to use my navbar function "my_navbar"
   my_navbar($calling_file);    // Call the navbar function
 ?>

Затем в my_common_include.php у меня есть...

<?php
   function my_navbar($calling_file)
   {
      // All your usual nabvbar code here up to the menu items
      if ($calling_file=="index.php")   {   echo '<li class="nav-item active">';    } else {    echo '<li class="nav-item">';   }
    echo '<a class="nav-link" href="index.php">Home</a>
</li>';
      if ($calling_file=="about.php")   {   echo '<li class="nav-item active">';    } else {    echo '<li class="nav-item">';   }
    echo '<a class="nav-link" href="about.php">About</a>
</li>';
      if ($calling_file=="galleries.php")   {   echo '<li class="nav-item active">';    } else {    echo '<li class="nav-item">';   }
    echo '<a class="nav-link" href="galleries.php">Galleries</a>
</li>';
       // etc for the rest of the menu items and closing out the navbar
     }
  ?>

Ответ 22

Bootstrap 4 требует, чтобы целевой li элемент для активных классов. Чтобы сделать это, вы должны найти родителя a. "Хитбокс" из a так же большой, как li, но из - за bubbeling события в JS это даст вам обратно a событие. Таким образом, вы должны вручную добавить его к своему родителю.

  //set active navigation after click
  $(".nav-link").on("click", (event) => {
    $(".navbar-nav").find(".active").removeClass('active');
    $(event.target).parent().addClass('active');
  });

Ответ 23

Я пробовал первые 5 решений и их различные варианты, но они не помогли мне.

Наконец-то я начал работать с этими двумя функциями.

$(document).on('click', '.nav-link', function () {
    $(".nav-item").find(".active").removeClass("active");
})

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