wake-up-neo.net

Bootstrap navbar Active State funktioniert nicht

Ich habe Bootstrap V3.

Ich verwende den class="active" für meinenavbar und wechselt nicht, wenn ich Menüpunkte drücke. Ich weiß, wie man das mit jQuery macht und eine Klickfunktion baut, aber ich denke, dass diese Funktionalität in Bootstrap enthalten sein sollte. Vielleicht ist es eine JavaScript-Ausgabe?

Hier ist mein Header mit meinen js/css/bootstrap-Dateien, die ich mitgeliefert habe:

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

Hier ist mein navbar Code:

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

Mache ich das richtig?

(Auf eine nicht verwandte Notiz, aber möglicherweise in Verbindung stehend? Wenn das Menü mobil wird, klicke ich auf die Menüschaltfläche, und es wird ausgeblendet. Wenn Sie es erneut drücken, wird es nicht wieder ausgeblendet JavaScript-Setup vielleicht?)

69
KickingLettuce

Sie haben die minimierte Bootstrap-JS-Datei und die Plug-Ins zum Minimieren und zum Übergang hinzugefügt, während die Dokumente Folgendes angeben:

Sowohl bootstrap.js als auch bootstrap.min.js enthalten alle Plugins in einer einzigen Datei.
Nur einen einschließen.

und

Um einfache Übergangseffekte zu erzielen, schließen Sie einmal neben .__ um. die anderen JS-Dateien. Wenn Sie das kompilierte (oder minifizierte) .__ verwenden. bootstrap.js, es ist nicht nötig, dies aufzunehmen - es ist bereits da.

Das könnte also Ihr Problem für das Minimierungsproblem sein. 

Für die aktive Klasse müssen Sie es selbst verwalten, aber es ist nur ein oder zwei Zeilen.

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

Hier war meine Lösung zum Wechseln aktiver Seiten

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

Mit der Bootstrap-Version 3.3.4 können Sie auf langen HTML-Seiten auf Abschnitte der Seite verweisen. nach Klasse oder ID, um den aktiven Navbar-Link mit Spion-Scroll mit dem Body-Element zu verwalten:

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

Das Datenziel ist ein div mit der 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>

Dies sollte Links durch Klicken aktivieren, ohne dass JavaScript-Funktionen erforderlich sind. Außerdem werden automatisch alle Links aktiviert, wenn Sie durch die entsprechenden verknüpften Abschnitte der Seite blättern, die von js onclick () nicht unterstützt werden.

13
jim

Dies funktioniert perfekt für mich, denn "window.location.pathname" enthält auch Daten vor dem tatsächlichen Seitennamen, z. verzeichnis/page.php. Der eigentliche Navbar-Link wird also nur dann auf aktiv gesetzt, wenn die URL diesen Link enthält.

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

Wenn Sie keine Ankerlinks verwenden, können Sie Folgendes verwenden:

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

Sie müssen lediglich data-toggle = "tab" zu Ihrem Link in der Bootstrap-Navigationsleiste hinzufügen: 

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

Mit Bootstrap 4 können Sie Folgendes verwenden:

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

Diese elegante Lösung hat mir geholfen. Alle neuen Ideen/Vorschläge sind willkommen.

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

Sie können die "siblings ()" - Methode von jQuery verwenden, um nur das aufgerufene Element und dessen Geschwister inaktiv zu halten.

4
JefferinJoseph

Ich habe heute damit zu kämpfen, Data-Togle funktionierte nur, wenn ich mich für eine Einzelseitenanwendung interessiere. 

Ich verwende ajax nicht, um den Inhalt zu laden, den ich tatsächlich für andere Seiten poste. Daher war das erste js-Skript auch nutzlos. Ich löse es mit diesen Zeilen:

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

Ich hatte einige Schmerzen damit, ein dynamisch generiertes Listenelement zu verwenden - WordPress Stack.

Dies hinzugefügt und es hat funktioniert: 

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

Werde es im laufenden Betrieb tun.

1
Someguywhocodes

Ich hoffe, dass dies helfen wird, dieses Problem zu lösen.

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

Bootstrap 4-Lösung, die für mich funktioniert hat:

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

Dies funktioniert nur, wenn hreflocation.pathname enthält!

Wenn Sie Ihre Site auf Ihrem eigenen PC testen (mit Wamp, Xampp, Lamp usw.) und sich Ihre Site in einem Unterordner befindet, lautet der Pfad tatsächlich "/somefolder/something.php" verwirrt.

Ich würde vorschlagen, wenn Sie unsicher sind, den folgenden Code zu verwenden, um sicherzustellen, dass das richtige location.pathname ist:

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

Die Klasse "active" wird nicht direkt mit bootstrap verwaltet. In Ihrem Fall, da Sie PHP verwenden, können Sie Folgendes sehen:

Wie addiere class = 'active' zum HTML-Menü mit PHP

um Sie mit einer Methode zu unterstützen, die es meist automatisiert. 

0
Kritner

Als jemand, der kein Javascript kennt, ist hier eine PHP Methode, die für mich funktioniert und leicht zu verstehen ist. Meine gesamte Navigationsleiste befindet sich in einer PHP -Funktion, die sich in einer Datei mit allgemeinen Komponenten befindet, die ich von meinen Seiten einbinde. So habe ich zum Beispiel in meiner 'index.php'-Seite ... `

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

Dann habe ich in der '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
     }
  ?>
0
M61Vulcan

Bootstrap 4 erfordert, dass Sie das Element li für aktive Klassen auswählen. Dazu müssen Sie das übergeordnete Element des a finden. Die 'Hitbox' des a ist so groß wie das li, aber aufgrund des sprudelnden Ereignisses in JS wird das a -Ereignis zurückgegeben. Sie müssen es also manuell dem übergeordneten Element hinzufügen.

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

Ich benutze Bootstrap Bare Theme, hier ist der Beispiel-Navbar-Code. Beachten Sie den Klassennamen des Elements -> .nav -, da dies im Java-Skript angegeben wird.

/ 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

fügen Sie in der Ansichtsseite (oder teilweise) Folgendes hinzu: javascript, Dies muss jedes Mal ausgeführt werden, wenn die Seite geladen wird.

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

Stellen Sie im Javascript-Debugger sicher, dass der Wert des Attributs 'href' mit window.location.pathname übereinstimmt. Dies unterscheidet sich geringfügig von der Lösung von @Zitrax, die mir dabei geholfen hat, mein Problem zu beheben.

0
Rishi

Wenn Sie das Bootstrap-Menü nach dem Klicken auf ein Element deaktivieren, können Sie dies verwenden 

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

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

Fügen Sie dieses JavaScript in Ihre js-Hauptdatei ein.  

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

Für AngularJS können Sie ng-class mit einer Funktion wie der folgenden verwenden:

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>

Und Controller 

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

Wenn Sie $ location verwenden, gibt es keinen Hash. So können Sie die erforderliche Zeichenfolge aus der URL extrahieren, indem Sie $ location verwenden.

Das Folgende funktioniert nicht in allen Fällen ->

Die Verwendung einer Bereichsvariablen wie der folgenden Funktion funktioniert nur, wenn Sie darauf klicken. Wenn der Übergang mit $state.transitionTo oder window.location oder manuellem Aktualisieren der URL durchgeführt wird, wird der Tab-Wert nicht aktualisiert

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

Ich musste einen Schritt vorwärts gehen, da meine Dateinamen nicht mit den Titeln der Navigationsleiste übereinstimmten. Das heißt, mein erster Link zur Navigationsleiste war HOME, aber der Dateiname ist index ..

Also schnappen Sie sich einfach den Pfadnamen und passen Sie ihn an.

Offensichtlich ist dies ein grobes Beispiel und könnte effizienter sein, aber es ist ein starkes Bedürfnis des Kunden.

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

die nächste Antwort ist für diejenigen, die ein mehrstufiges Menü haben:

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

 Exeample how it works 

0
futur1st