Status Aktif navbar bootstrap tidak berfungsi

Saya memiliki bootstrap v3.

Saya menggunakan tombol class="active"on navbardan tidak menyala saat saya menekan item menu. Saya tahu bagaimana melakukan ini dengan jQuerydan membangun fungsi klik tetapi saya pikir fungsionalitas ini harus disertakan dalam bootstrap? Jadi mungkin ini masalah JavaScript?

Ini adalah header saya dengan file js / css / bootstrap yang telah saya sertakan:

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

Ini navbarkode saya :

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

Apakah saya menyiapkannya dengan benar?

(Pada catatan yang tidak terkait, tetapi mungkin terkait? Saat menu beralih ke seluler, saya klik tombol menu dan tombol menu itu menciut. Menekannya lagi tidak akan membatalkan penciutan. Jadi masalah ini, dengan yang lain, keduanya menandakan penyiapan JavaScript yang salah mungkin?)

Anda telah menyertakan file Bootstrap js yang diperkecil dan plugin penciutan / transisi sementara dokumen menyatakan bahwa:

Baik bootstrap.js dan bootstrap.min.js berisi semua plugin dalam satu file.
Sertakan hanya satu.

dan

Untuk efek transisi sederhana, sertakan transisi.js satu kali di samping file JS lainnya. Jika Anda menggunakan bootstrap.js yang dikompilasi (atau dikecilkan), tidak perlu menyertakan ini — ini sudah ada di sana.

Jadi itu bisa jadi masalah Anda untuk meminimalkan masalah.

Untuk kelas aktif, Anda harus mengelolanya sendiri, tetapi itu hanya satu atau dua baris.

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

Inilah solusi saya untuk mengganti halaman aktif

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

Ini bekerja dengan sempurna untuk saya, karena "window.location.pathname" juga berisi data sebelum nama halaman sebenarnya, misalnya direktori / halaman.php. Jadi link navbar sebenarnya hanya akan aktif jika url berisi link ini.

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

Dengan bootstrap versi 3.3.4, pada halaman html yang panjang Anda dapat merujuk ke bagian halaman. berdasarkan kelas atau id untuk mengelola link navbar aktif dengan spy-scroll dengan elemen body:

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

Data-target akan menjadi div dengan 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>

Ini harus mengaktifkan tautan dengan mengklik tanpa memerlukan fungsi javascript dan juga akan secara otomatis mengaktifkan setiap tautan saat Anda menggulir melalui bagian terkait dari halaman yang tidak akan dilakukan oleh js onclick ().

Yang perlu Anda lakukan hanyalah menambahkan data-toggle = "tab" ke tautan Anda di dalam bilah navigasi bootstrap seperti ini:

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

Jika Anda tidak menggunakan tautan jangkar, Anda dapat menggunakan sesuatu seperti ini:

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

Dengan Bootstrap 4 Anda dapat menggunakan ini:

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

Solusi elegan ini berhasil untuk saya. Ide / saran baru dipersilakan.

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

Anda bisa menggunakan metode "siblings ()" jQuery agar hanya item yang diakses yang aktif dan saudara kandungnya tidak aktif.

Saya telah berjuang dengan ini hari ini, data-togle hanya berfungsi jika saya menggunakan aplikasi satu halaman.

Saya tidak menggunakan ajax untuk memuat konten. Saya sebenarnya membuat permintaan posting untuk halaman lain jadi skrip js pertama juga tidak berguna. Saya menyelesaikannya dengan baris ini:

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

Saya harap ini akan membantu menyelesaikan masalah ini.

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

Saya mengalami sedikit kesulitan dengan ini, menggunakan item daftar yang dibuat secara dinamis - WordPress Stack.

Menambahkan ini dan berhasil:

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

Akan melakukannya dengan cepat.

Saya menggunakan ini. Singkat, elegan, dan mudah dimengerti.

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

Kelas "aktif" tidak dikelola di luar kotak dengan bootstrap. Dalam kasus Anda karena Anda menggunakan PHP, Anda dapat melihat:

Bagaimana menambahkan class = 'active' ke menu html dengan php

untuk membantu Anda dengan metode sebagian besar mengotomatiskannya.

Untuk bootstrap menu ponsel un-collapse setelah mengklik item Anda dapat menggunakan ini

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

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

Saya menggunakan tema bootstrap telanjang, berikut adalah contoh kode navbar. Catat nama kelas elemen -> .nav - karena ini disebut dalam 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

di halaman tampilan (atau sebagian) tambahkan ini: javascript, ini perlu dijalankan setiap kali halaman dimuat.

cuplikan tampilan haml ->

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

Dalam debugger javascript, pastikan Anda memiliki nilai atribut 'href' yang cocok dengan window.location.pathname. Ini sedikit berbeda dari solusi oleh @Zitrax yang membantu saya memperbaiki masalah saya.

Sebab AngularJS, Anda bisa menggunakan ng-classdengan fungsi seperti ini:

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>

Dan pengontrol

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

Jika Anda menggunakan $ location, maka tidak akan ada hash. Jadi Anda dapat mengekstrak string yang diperlukan dari URL menggunakan $ location

Mengikuti tidak akan berfungsi di semua kasus ->

Menggunakan variabel cakupan seperti berikut hanya akan berfungsi saat diklik, tetapi jika transisi dilakukan menggunakan $state.transitionToatau window.location atau memperbarui URL secara manual, nilai Tab tidak akan diperbarui

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

Tambahkan JavaScript ini ke file js utama Anda.

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

Saya harus melangkah maju karena nama file saya tidak sama dengan judul bilah navigasi saya. yaitu, tautan bilah navigasi pertama saya adalah HOME tetapi nama filenya adalah indeks ..

Jadi ambil saja nama jalur dan cocokkan.

Jelas ini adalah contoh kasar dan bisa lebih efisien tetapi sangat dibutuhkan.

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

Solusi bootstrap 4 yang berhasil untuk saya:

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

Ini hanya akan berfungsi jika href berisi location.pathname !

Jika Anda menguji situs Anda di pc Anda sendiri (menggunakan wamp, xampp, lamp, dll ...) dan situs Anda terletak di beberapa subfolder maka jalur Anda sebenarnya adalah "/somefolder/something.php", jadi jangan dapatkan bingung.

Saya akan menyarankan jika Anda tidak yakin untuk menggunakan kode berikut sehingga Anda dapat memastikan apa itu location.pathname yang benar :

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

jawaban selanjutnya adalah untuk mereka yang memiliki menu multi level:

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

Sebagai seseorang yang tidak tahu javascript, berikut adalah metode PHP yang cocok untuk saya dan mudah dimengerti. Seluruh navbar saya ada dalam fungsi PHP yang ada di file komponen umum yang saya sertakan dari halaman saya. Jadi misalnya di halaman 'index.php' saya, saya punya ... `

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

Kemudian di 'my_common_includes.php' saya punya ...

<?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 mengharuskan Anda menargetkan liitem untuk kelas aktif. Untuk melakukan itu, Anda harus mencari induk dari a. The 'hitbox' aadalah sebesar itu litetapi karena gelembung acara di JS itu akan mengembalikan aacara tersebut. Jadi, Anda harus menambahkannya secara manual ke induknya.

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

Saya mencoba tentang 5 solusi pertama dan variasinya yang berbeda, tetapi tidak berhasil untuk saya.

Akhirnya saya membuatnya bekerja dengan dua fungsi ini.

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

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

ketika menggunakan header.php untuk setiap halaman untuk kode navbar, jquery tidak berfungsi, aktif diterapkan dan kemudian dihapus, solusi sederhana, adalah sebagai berikut

pada setiap halaman mengatur variabel <?php $pageName = "index"; ?>pada halaman Indeks dan juga <?php $pageName = "contact"; ?>pada halaman Hubungi kami

lalu panggil header.php (yaitu kode nav ada di header.php) <?php include('header.php'); >

di header.php pastikan bahwa setiap nav-link adalah sebagai berikut

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

Semoga ini membantu karena saya telah menghabiskan waktu berhari-hari untuk membuat jquery berfungsi tetapi gagal,

jika seseorang dengan ramah akan menjelaskan apa sebenarnya masalahnya ketika header.php disertakan dan kemudian halaman dimuat ... mengapa jquery gagal menambahkan kelas aktif ke nav-link .. ??

Saya telah mencari solusi yang dapat saya gunakan pada bootstrap 4 navbar dan grup tautan lainnya.

Karena satu dan lain alasan, sebagian besar solusi tidak berfungsi terutama yang mencoba menambahkan 'aktif' ke tautan onclick karena tentu saja begitu tautan diklik jika membawa Anda ke halaman lain maka 'aktif' yang Anda tambahkan tidak akan di sana karena DOM telah berubah. Banyak dari solusi lain yang tidak berfungsi karena sering kali tidak cocok dengan tautan atau cocok lebih dari satu.

Solusi elegan ini bagus untuk tautan yang berbeda yaitu: about.php, index.php, dll ...

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

Namun ketika datang ke tautan yang sama dengan string kueri yang berbeda seperti index.php? Tag = a, index.php? Tag = b, index.php? Tag = c itu akan mengatur semuanya untuk aktif mana saja yang diklik seperti itu mencocokkan nama jalur, bukan kueri juga.

Jadi saya mencoba kode ini yang cocok dengan nama path dan string kueri dan itu bekerja pada semua tautan dengan string kueri tetapi ketika tautan seperti index.php diklik itu akan mengatur tautan string kueri serupa aktif juga. Ini karena fungsi saya mengembalikan string kosong jika tidak ada string kueri di tautan, lagi-lagi hanya cocok dengan nama jalur.

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

Jadi pada akhirnya saya meninggalkan rute ini dan membuatnya tetap sederhana dan menulis ini.

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

Ini berfungsi pada semua tautan dengan atau tanpa string kueri karena element.href dan location.href keduanya mengembalikan jalur lengkap. Untuk menu lain dll Anda cukup mengubah pemilih kelas induk (navbar) untuk yang lain yaitu:

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

Satu hal terakhir yang juga tampaknya penting dan itu adalah pustaka js & css yang Anda gunakan, tetapi itu mungkin posting lain. Saya harap ini membantu dan berkontribusi.