Bootstrap navbar Active State không hoạt động

Tôi có bootstrap v3.

Tôi sử dụng class="active"trên của tôi navbarvà nó không chuyển khi tôi nhấn các mục menu. Tôi biết cách làm điều này với jQueryvà xây dựng một chức năng nhấp chuột nhưng tôi nghĩ rằng chức năng này nên được bao gồm trong bootstrap? Vì vậy, có thể nó là một vấn đề JavaScript?

Đây là tiêu đề của tôi với các tệp js / css / bootstrap mà tôi đã đưa vào:

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

Đây là navbarmã của tôi :

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

Tôi đang thiết lập điều này đúng không?

(Trên một ghi chú không liên quan, nhưng có thể liên quan? Khi menu di động, tôi nhấp vào nút menu và nó sẽ sụp đổ. Đẩy nó một lần nữa không làm nó bị thu gọn. Vì vậy, vấn đề này với vấn đề khác, cả hai đều biểu thị thiết lập JavaScript sai có lẽ?)

Bạn đã bao gồm tệp js Bootstrap được rút gọn và các plugin thu gọn / chuyển tiếp trong khi tài liệu nói rằng:

Cả bootstrap.js và bootstrap.min.js đều chứa tất cả các plugin trong một tệp duy nhất.
Chỉ bao gồm một.

và

Đối với các hiệu ứng chuyển tiếp đơn giản, hãy bao gồm cả transfer.js cùng với các tệp JS khác. Nếu bạn đang sử dụng bootstrap.js đã biên dịch (hoặc được rút gọn), thì không cần phải bao gồm cái này — nó đã ở đó.

Vì vậy, đó cũng có thể là vấn đề của bạn cho vấn đề giảm thiểu.

Đối với lớp đang hoạt động, bạn phải tự quản lý nó, nhưng nó chỉ là một hoặc hai dòng.

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

Đây là giải pháp của tôi để chuyển đổi các trang đang hoạt động

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

Điều này hoàn toàn phù hợp với tôi, bởi vì "window.location.pathname" cũng chứa dữ liệu trước tên trang thực, ví dụ như thư mục / page.php. Vì vậy, liên kết thanh điều hướng thực tế sẽ chỉ được đặt thành hoạt động nếu url chứa liên kết này.

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

Với phiên bản 3.3.4 của bootstrap, trên các trang html dài, bạn có thể tham khảo các phần của pg. theo lớp hoặc id để quản lý liên kết thanh điều hướng đang hoạt động với cuộn gián điệp với phần tử body:

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

Mục tiêu dữ liệu sẽ là một div với 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>

Thao tác này sẽ kích hoạt các liên kết bằng cách nhấp vào mà không cần bất kỳ chức năng javascript nào và cũng sẽ tự động kích hoạt từng liên kết khi bạn cuộn qua các phần được liên kết tương ứng của trang mà js onclick () sẽ không.

Tất cả những gì bạn cần làm chỉ đơn giản là thêm data-toggle = "tab" vào liên kết của bạn bên trong thanh điều hướng bootstrap như sau:

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

Nếu bạn không sử dụng liên kết neo, bạn có thể sử dụng một cái gì đó như sau:

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

Với Bootstrap 4, bạn có thể sử dụng:

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

Giải pháp thanh lịch này đã giúp tôi. Mọi ý tưởng / đề xuất mới đều được hoan nghênh.

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

Bạn có thể sử dụng phương thức "anh chị em ()" của jQuery để chỉ giữ cho mục được truy cập hoạt động và anh chị em của nó không hoạt động.

Tôi đã phải vật lộn với điều này ngày hôm nay, data-togle chỉ hoạt động nếu tôi đang sử dụng một ứng dụng trang.

Tôi không sử dụng ajax để tải nội dung mà tôi thực sự đang đưa ra yêu cầu đăng bài cho các trang khác nên tập lệnh js đầu tiên cũng vô dụng. Tôi giải quyết nó bằng những dòng này:

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

Tôi hy vọng điều này sẽ giúp giải quyết vấn đề này.

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

Tôi đã gặp một số khó khăn với điều này, sử dụng một danh sách các mục được tạo động - WordPress Stack.

Đã thêm cái này và nó hoạt động:

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

Sẽ làm điều đó một cách nhanh chóng.

Tôi sử dụng cái này. Nó ngắn gọn, thanh lịch và dễ hiểu.

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

Lớp "đang hoạt động" không được quản lý bằng bootstrap. Trong trường hợp của bạn vì bạn đang sử dụng PHP, bạn có thể thấy:

Cách thêm class = 'active' vào menu html với php

để hỗ trợ bạn với một phương pháp chủ yếu là tự động hóa nó.

Đối với trình đơn bootstrap di động, việc bỏ thu gọn sau khi nhấp vào một mục, bạn có thể sử dụng nó

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

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

Tôi đang sử dụng chủ đề trần bootstrap, đây là mã điều hướng mẫu. Lưu ý tên lớp của phần tử -> .nav - vì nó được tham chiếu trong 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

trong trang xem (hoặc một phần) thêm this: javascript, điều này cần được thực thi mỗi khi tải trang.

đoạn mã chế độ xem haml ->

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

Trong trình gỡ lỗi javascript, hãy đảm bảo rằng bạn có giá trị của thuộc tính 'href' phù hợp với window.location.pathname. Điều này hơi khác so với giải pháp của @Zitrax đã giúp tôi khắc phục sự cố của mình.

Đối với AngularJS, bạn có thể sử dụng ng-classvới một chức năng như sau:

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>

Và bộ điều khiển

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' : '';
        }
    }    
}]);

Nếu bạn đang sử dụng $ location, thì sẽ không có hàm băm. Vì vậy, bạn có thể trích xuất chuỗi bắt buộc từ URL bằng cách sử dụng $ location

Sau đây sẽ không hoạt động trong mọi trường hợp ->

Sử dụng một biến phạm vi như sau sẽ chỉ hoạt động khi được nhấp vào, nhưng nếu quá trình chuyển đổi được thực hiện bằng cách sử dụng $state.transitionTohoặc window.location hoặc cập nhật URL theo cách thủ công, giá trị Tab sẽ không được cập nhật

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

Thêm JavaScript này vào tệp js chính của bạn.

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

Tôi phải tiến thêm một bước vì tên tệp của tôi không giống với tiêu đề thanh điều hướng của tôi. tức là liên kết thanh điều hướng đầu tiên của tôi là HOME nhưng tên tệp là chỉ mục ..

Vì vậy, chỉ cần lấy tên đường dẫn và khớp với nó.

Rõ ràng đây là một ví dụ thô và có thể hiệu quả hơn nhưng nó là nhu cầu tùy chỉnh cao.

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

Giải pháp Bootstrap 4 phù hợp với tôi:

$(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();
});

Điều này sẽ chỉ hoạt động nếu href chứa location.pathname !

Nếu bạn đang kiểm tra trang web của mình trên máy tính của chính mình (sử dụng wamp, xampp, lamp, v.v.) và trang web của bạn nằm trong một số thư mục con thì đường dẫn của bạn thực sự là "/somefolder/something.php", vì vậy đừng lấy bối rối.

Tôi sẽ đề xuất nếu bạn không chắc chắn sử dụng mã sau để bạn có thể đảm bảo đâu là vị trí chính xác. Tên đường dẫn:

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

câu trả lời tiếp theo dành cho những ai có menu nhiều cấp:

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

Là một người không biết javascript, đây là một phương pháp PHP phù hợp với tôi và rất dễ hiểu. Toàn bộ thanh điều hướng của tôi nằm trong một hàm PHP nằm trong tệp các thành phần phổ biến mà tôi đưa vào từ các trang của mình. Vì vậy, ví dụ: trong trang 'index.php' của tôi, tôi có ...

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

Sau đó, trong 'my_common_includes.php' tôi có ...

<?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 yêu cầu bạn nhắm mục tiêu limục cho các lớp đang hoạt động. Để làm điều đó, bạn phải tìm cha mẹ của a. 'Hitbox' của acũng lớn bằng linhưng do sự kiện sôi động trong JS nên nó sẽ trả lại cho bạn asự kiện. Vì vậy, bạn phải thêm nó vào cha mẹ của nó theo cách thủ công.

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

Tôi đã thử khoảng 5 giải pháp đầu tiên và các biến thể khác nhau của chúng, nhưng chúng không hiệu quả với tôi.

Cuối cùng tôi đã làm cho nó hoạt động với hai chức năng này.

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

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

khi sử dụng header.php cho mọi trang cho mã navbar, jquery không hoạt động, kích hoạt được áp dụng và sau đó bị loại bỏ, một giải pháp đơn giản như sau

trên mỗi trang đặt biến <?php $pageName = "index"; ?>trên trang Chỉ mục và tương tự <?php $pageName = "contact"; ?>trên trang Liên hệ với chúng tôi

sau đó gọi header.php (tức là mã nav nằm trong header.php) <?php include('header.php'); >

trong header.php đảm bảo rằng mỗi nav-link như sau

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

hy vọng điều này sẽ giúp ích vì tôi đã mất nhiều ngày để jquery hoạt động nhưng không thành công,

nếu ai đó vui lòng giải thích vấn đề chính xác là gì khi header.php được bao gồm và sau đó tải trang ... tại sao jquery không thêm lớp hoạt động vào nav-link .. ??

Tôi đang tìm kiếm một giải pháp mà tôi có thể sử dụng trên bootstrap 4 navbars và các nhóm liên kết khác.

Vì lý do này hay lý do khác, hầu hết các giải pháp đều không hoạt động, đặc biệt là những giải pháp cố gắng thêm 'hoạt động' vào các liên kết trên cú nhấp chuột vì tất nhiên khi liên kết được nhấp vào nếu nó đưa bạn đến một trang khác thì 'hoạt động' bạn đã thêm sẽ không được ở đó vì DOM đã thay đổi. Nhiều giải pháp khác cũng không hoạt động vì chúng thường không khớp với liên kết hoặc chúng khớp với nhiều hơn một.

Giải pháp thanh lịch này phù hợp với các liên kết khác nhau, ví dụ: about.php, index.php, v.v.

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

Tuy nhiên, khi nó đến với các liên kết giống nhau với các chuỗi truy vấn khác nhau như index.php? Tag = a, index.php? Tag = b, index.php? Tag = c, nó sẽ đặt tất cả chúng thành hoạt động tùy theo điều kiện nào được nhấp vào đối sánh với tên đường dẫn không phải là truy vấn.

Vì vậy, tôi đã thử mã này khớp với tên đường dẫn và chuỗi truy vấn và nó hoạt động trên tất cả các liên kết có chuỗi truy vấn nhưng khi một liên kết như index.php được nhấp vào, nó cũng sẽ đặt các liên kết chuỗi truy vấn tương tự hoạt động. Điều này là do hàm của tôi đang trả về một chuỗi trống nếu không có chuỗi truy vấn trong liên kết, một lần nữa chỉ khớp với tên đường dẫn.

$(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;
}

Vì vậy, cuối cùng tôi đã từ bỏ lộ trình này và giữ cho nó đơn giản và viết điều này.

$('.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');
    }
});

Nó hoạt động trên tất cả các liên kết có hoặc không có chuỗi truy vấn vì element.href và location.href đều trả về đường dẫn đầy đủ. Đối với các menu khác, v.v., bạn có thể chỉ cần thay đổi bộ chọn lớp cha (thanh điều hướng) cho một menu khác, tức là:

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

Một điều cuối cùng cũng có vẻ quan trọng và đó là thư viện js & css mà bạn đang sử dụng tuy nhiên có lẽ đó là một bài đăng khác. Tôi hy vọng điều này sẽ giúp ích và đóng góp.