Bootstrap navbar Active State ไม่ทำงาน

ฉันมี bootstrap v3.0

ฉันใช้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 ที่ไม่ถูกต้อง บางที?)

คุณได้รวมไฟล์ Bootstrap js ที่ย่อขนาดและปลั๊กอินยุบ / เปลี่ยนในขณะที่เอกสารระบุว่า:

ทั้ง bootstrap.js และ bootstrap.min.js มีปลั๊กอินทั้งหมดในไฟล์เดียว
รวมเพียงรายการเดียว

และ

สำหรับเอฟเฟกต์การเปลี่ยนอย่างง่ายให้ใส่ transition.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 ดังนั้นลิงก์ navbar จริงจะถูกตั้งค่าเป็นใช้งานได้ก็ต่อเมื่อ url มีลิงก์นี้

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

ด้วย bootstrap เวอร์ชัน 3.3.4 บนเพจ html แบบยาวคุณสามารถอ้างถึงส่วนต่างๆของเพจ ตามคลาสหรือ id เพื่อจัดการลิงก์ navbar ที่ใช้งานอยู่ด้วยการสอดแนมเลื่อนด้วยองค์ประกอบเนื้อหา:

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

data-target จะเป็น 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>

สิ่งนี้ควรเปิดใช้งานลิงก์โดยการคลิกโดยไม่จำเป็นต้องใช้ฟังก์ชั่นจาวาสคริปต์และจะเปิดใช้งานแต่ละลิงก์โดยอัตโนมัติเมื่อคุณเลื่อนดูส่วนที่เชื่อมโยงที่เกี่ยวข้องของหน้าซึ่ง js onclick () จะไม่

สิ่งที่คุณต้องทำก็เพียงแค่เพิ่มdata-toggle = "tab"ลงในลิงก์ของคุณภายใน bootstrap 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>

หากคุณไม่ใช้จุดยึดลิงก์คุณสามารถใช้สิ่งต่อไปนี้:

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

คุณสามารถใช้เมธอด "brothers ()" ของ jQuery เพื่อให้เฉพาะไอเท็มที่เข้าถึงใช้งานได้และไม่ใช้งานพี่น้อง

ฉันใช้สิ่งนี้ มันสั้นสง่าและเข้าใจง่าย

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

วันนี้ฉันกำลังดิ้นรนกับเรื่องนี้ แต่ 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");
});

จะทำในทันที

ฉันกำลังมองหาวิธีแก้ปัญหาที่ฉันสามารถใช้กับแถบนำทาง bootstrap 4 และลิงก์กลุ่มอื่น ๆ

ด้วยเหตุผลหนึ่งหรืออีกวิธีหนึ่งวิธีแก้ปัญหาส่วนใหญ่ไม่ได้ผลโดยเฉพาะอย่างยิ่งวิธีที่พยายามเพิ่ม 'ใช้งาน' ไปยังลิงก์บนคลิกเพราะแน่นอนว่าเมื่อลิงก์ถูกคลิกหากนำคุณไปยังหน้าอื่นแล้ว 'ใช้งาน' ที่คุณเพิ่มจะไม่เป็น ที่นั่นเนื่องจาก 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 ส่งคืนเส้นทางแบบเต็ม สำหรับเมนูอื่น ๆ คุณสามารถเปลี่ยนตัวเลือกคลาสแม่ (navbar) สำหรับอีกเช่น:

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

สิ่งสุดท้ายที่ดูเหมือนสำคัญเช่นกันและนั่นคือไลบรารี js & css ที่คุณใช้อย่างไรก็ตามอาจเป็นโพสต์อื่น ฉันหวังว่านี่จะช่วยและมีส่วนช่วย

คลาส "active" ไม่ได้รับการจัดการนอกกรอบด้วย bootstrap ในกรณีของคุณเนื่องจากคุณใช้ PHP คุณสามารถดู:

วิธีเพิ่ม class = 'active' ลงในเมนู html ด้วย php

เพื่อช่วยเหลือคุณด้วยวิธีการทำงานอัตโนมัติเป็นส่วนใหญ่

สำหรับการยกเลิกการยุบเมนู bootstrap mobile หลังจากคลิกรายการคุณสามารถใช้สิ่งนี้ได้

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

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

ฉันใช้ธีม bootstrap เปล่านี่คือตัวอย่างโค้ด navbar สังเกตชื่อคลาสขององค์ประกอบ -> .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

ในหน้าดู (หรือบางส่วน) เพิ่มสิ่งนี้: จาวาสคริปต์สิ่งนี้จะต้องดำเนินการทุกครั้งที่โหลดหน้า

ข้อมูลโค้ดมุมมอง haml ->

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

ในโปรแกรมดีบักจาวาสคริปต์ตรวจสอบให้แน่ใจว่าคุณมีค่าของแอตทริบิวต์ "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 ด้วยตนเองค่า 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>

เพิ่ม JavaScript นี้ในไฟล์ js หลักของคุณ

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

ฉันต้องก้าวไปข้างหน้าเพราะชื่อไฟล์ของฉันไม่เหมือนกับชื่อแถบนำทางของฉัน เช่นลิงค์แถบนำทางแรกของฉันคือ HOME แต่ชื่อไฟล์เป็นดัชนี ..

ดังนั้นเพียงแค่จับชื่อพา ธ และจับคู่

เห็นได้ชัดว่านี่เป็นตัวอย่างที่หยาบคายและอาจมีประสิทธิภาพมากกว่า แต่เป็นความต้องการที่กำหนดเองสูง

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" ดังนั้นอย่ารับ สับสน.

ผมจะแนะนำหากคุณไม่แน่ใจในการใช้รหัสต่อไปนี้เพื่อให้คุณสามารถตรวจสอบว่าสิ่งที่เป็นที่ถูกต้องlocation.pathname :

$(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 ที่เหมาะกับฉันและเข้าใจง่าย navbar ทั้งหมดของฉันอยู่ในฟังก์ชัน 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. 'hitbox' ของ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 สำหรับทุกเพจสำหรับโค้ด navbar jquery จะไม่ทำงานแอคทีฟจะถูกนำไปใช้แล้วเอาออกวิธีแก้ปัญหาง่ายๆมีดังนี้

ในทุกตัวแปรชุดหน้า <?php $pageName = "index"; ?>ในหน้าดัชนีและในทำนองเดียวกัน <?php $pageName = "contact"; ?>ในหน้าติดต่อเรา

จากนั้นเรียก header.php (เช่นรหัส nav อยู่ใน header.php) <?php include('header.php'); >

ใน header.php ให้แน่ใจว่าแต่ละลิงค์นำทางเป็นดังนี้

<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 ไม่สามารถเพิ่มคลาสที่ใช้งานอยู่ใน nav-link .. ??

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