Активний стан навігатора Bootstrap не працює

У мене є bootstrap v3.

Я використовую class="active"на моєму, navbarі він не перемикається, коли я натискаю елементи меню. Я знаю, як це зробити jQueryта побудувати функцію клацання, але я думаю, що ця функція повинна бути включена в bootstrap? То, можливо, це проблема 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 можливо?)

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

І bootstrap.js, і bootstrap.min.js містять усі плагіни в одному файлі.
Включіть лише одну.

і

Для простих ефектів переходу включіть один раз перехід разом із іншими файлами JS. Якщо ви використовуєте скомпільований (або зменшений) bootstrap.js, немає потреби включати це - воно вже є.

Отже, це цілком може бути вашою проблемою для мінімізації проблеми.

Для активного класу ви повинні керувати цим самостійно, але це лише рядок-два.

Bootstrap 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");
});

Ось моє рішення для переключення активних сторінок

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

Для мене це прекрасно спрацювало, оскільки "window.location.pathname" також містить дані перед реальною назвою сторінки, наприклад directory / page.php. Тож фактичне посилання навігаційної панелі буде встановлено активним, лише якщо URL-адреса містить це посилання.

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

У версії 3.3.4 bootstrap на довгих HTML-сторінках ви можете посилатися на розділи сторінки. за класом або ідентифікатором для управління активним посиланням навігаційної панелі за допомогою шпигунської прокрутки за допомогою елемента body:

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

Data-target буде div з id = "шпигун-прокрутка-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 () не буде.

Все, що вам потрібно зробити, це просто додати data-toggle = "tab" до вашого посилання всередині панелі навігації bootstrap, як це:

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

Якщо ви не використовуєте якірні посилання, ви можете використовувати щось на зразок цього:

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

За допомогою Bootstrap 4 ви можете використовувати це:

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

Це елегантне рішення зробило для мене фокус. Будь-які нові ідеї / пропозиції вітаються.

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

Ви можете використовувати метод jQuery "siblings ()", щоб залишати активним лише доступний елемент, а його братів і сестер неактивними.

Я боровся з цим сьогодні, data-togle працював лише в тому випадку, якщо я перебуваю на одній сторінці програми.

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

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

Сподіваюся, це допоможе вирішити цю проблему.

      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";
            });
        });

Мені було боляче з цим, використовуючи динамічно генеровані елементи списку - WordPress Stack.

Додав це, і це спрацювало:

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

Зроблю це на льоту.

Я цим користуюся. Він короткий, елегантний і легкий для розуміння.

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

Класом "активний" не можна керувати нестандартно за допомогою bootstrap. У вашому випадку, оскільки ви використовуєте PHP, ви можете бачити:

Як додати class = 'active' до меню html за допомогою php

щоб допомогти вам з методом, який в основному автоматизує його.

Для мобільного меню bootstrap розгорнути після натискання елемента ви можете це використовувати

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

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

Я використовую відкриту тему bootstrap, ось зразок коду навігаційної панелі. Зверніть увагу на ім'я класу елемента -> .nav - оскільки про це йдеться у сценарії Java.

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

- 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, яке допомогло мені вирішити проблему.

Адже 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-адресу, значення вкладки не буде оновлено

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

Додайте цей JavaScript у свій основний js-файл.

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

Мені довелося зробити крок вперед, оскільки мої імена файлів були не такими, як мої заголовки панелі навігації. тобто моє перше посилання на навігаційну панель було 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');
}

Рішення 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, лампи тощо ...) і ваш сайт знаходиться в якійсь підпапці, тоді ваш шлях насправді "/somefolder/something.php", тому не отримуйте розгублений.

Я б запропонував, якщо ви не впевнені у використанні наступного коду, щоб ви могли переконатися, що це правильне розташування .

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

наступна відповідь для тих, хто має багаторівневе меню:

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");
    }
}

Як хтось, хто не знає 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_includes.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
     }
  ?>

Bootstrap 4 вимагає націлювання на liпредмет для активних класів. Для цього вам потрібно знайти батька a. "Хітбокс" цього файлу aтакий же великий, як і, liале завдяки міхуру події в JS він поверне вам aподію. Тому вам доведеться вручну додати його до батьківського елемента.

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

Я пробував перші 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'); 
});

коли використовується header.php для кожної сторінки для коду навігаційної панелі, jquery не працює, активний застосовується, а потім видаляється, просте рішення полягає в наступному

на кожній сторінці встановити змінну <?php $pageName = "index"; ?>на сторінці Index та аналогічно <?php $pageName = "contact"; ?>на сторінці Contact us

потім зателефонуйте header.php (тобто навігаційний код знаходиться в header.php) <?php include('header.php'); >

у header.php переконайтесь, що кожен nav-link такий

<a class="nav-link <?php if ($page_name == 'index') {echo "active";} ?> href="index.php">Home</a>

<a class="nav-link <?php if ($page_name == 'contact') {echo "active";} ?> href="contact.php">Contact Us</a>

сподіваюся, це допомагає тому, що я витратив дні, щоб примусити jquery працювати, але не вдалося,

якщо хтось люб'язно пояснить, в чому саме проблема, коли включений header.php, а потім завантажується сторінка ... чому jquery не вдається додати активний клас до навігаційного посилання .. ??

Я шукав рішення, яке я можу використовувати на панелях навігації bootstrap 4 та інших групах посилань.

З тієї чи іншої причини більшість рішень не працюють, особливо ті, які намагаються додати "активний" до посилань onclick, оскільки, звичайно, після натискання посилання, якщо воно переходить на іншу сторінку, додане вами "активне" не буде там, тому що DOM змінився. Багато інших рішень не працювали або тому, що вони часто не відповідали посиланням або вони відповідали кільком.

Це елегантне рішення підходить для різних посилань, тобто: about.php, index.php тощо ...

$(function() {
   $('nav a[href^="' + location.pathname.split("/")[2] + '"]').addClass('active');
});

Однак, коли справа доходила до одних і тих же посилань з різними рядками запитів, таких як index.php? Tag = a, index.php? Tag = b, index.php? Tag = c, це встановлювало би їх усі активними незалежно від того, що було натиснуто, як це відповідність імені шляху, а не запиту.

Отже, я спробував цей код, який відповідав імені шляху та рядку запиту, і він працював на всіх посиланнях із рядками запитів, але коли клацнуло посилання, як index.php, це також встановило б активні посилання на подібні рядки запиту. Це тому, що моя функція повертає порожній рядок, якщо у посиланні немає рядка запиту, знову ж просто відповідаючи імені шляху.

$(function() {
   $('nav a[href^="' + location.pathname.split("/")[2] + returnQueryString(location.href.split("?")[1]) + '"]').addClass('active');
});
/** returns a query string if there, else an empty string */
function returnQueryString (element) {
   if (element === undefined)
      return "";
   else
      return '?' + element;
}

Тож врешті-решт я відмовився від цього маршруту і спростив його, і написав це.

$('.navbar a').each(function(index, element) {
    //console.log(index+'-'+element.href);
    //console.log(location.href);
    /** look at each href in the navbar
      * if it matches the location.href then set active*/
    if (element.href === location.href){
        //console.log("---------MATCH ON "+index+" --------");
        $(element).addClass('active');
    }
});

Він працює на всіх посиланнях із рядками запитів або без них, оскільки element.href і location.href повертають повний шлях. Для інших меню тощо можна просто змінити селектор батьківського класу (панель навігації) на інший, тобто:

$('.footer a').each(function(index, element)...

Останнє, що також здається важливим, - це бібліотека js & css, яку ви використовуєте, проте це, можливо, інша публікація. Сподіваюся, це допомагає та сприяє.