web-dev-qa-db-ger.com

Bootstrap CSS Active Navigation

Auf der Bootstrap-Website stimmt der Subnav mit den Abschnitten überein und ändert die Hintergrundfarbe, während Sie zu dem Abschnitt blättern. Ich wollte mein eigenes Menü ohne alle Hintergrundfarben und alles erstellen. Allerdings habe ich mein CSS so geändert, dass es sich um ein ähnliches CSS handelt. Wenn ich jedoch nach unten scrolle oder auf den Menüpunkt klicke, wechselt die aktive Klasse nicht. Nicht sicher, was ich falsch mache. 

HTML:

<ul class="menu">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#about">About Us</a></li>
    <li><a href="#contact">Contact</a></li>
</ul>

CSS:

.menu {list-style:none;}
.menu > li {float: left;}
.menu > li > a {color:#555;float: none;padding: 10px 16px 11px;display: block;}
.menu > li > a:hover {color: #F95700;}
.menu .active > a, .menu .active > a:hover {color:#F95700;}

Ich habe die Akten überprüft; jQuery, bootstrap.js und bootstrap.css sind alle ordnungsgemäß verknüpft. Muss ich zusätzliche jQuery hinzufügen oder fehlt mir CSS, damit der Aktiv-Server wie das Subnav-Menü auf seiner Website wechselt?

43
user1029779

Um die Klasse zu wechseln, müssen Sie JavaScript ausführen.

In jQuery:

$('.menu li a').click(function(e) {
  var $this = $(this);
  if (!$this.hasClass('active')) {
    $this.addClass('active');
  }
  e.preventDefault();
});

In JavaScript:

var menu = document.querySelector('.menu');
var anchors = menu.getElementsByTagName('a');

for (var i = 0; i < anchors.length; i += 1) {
  anchors[i].addEventListener('click', function() { clickHandler(anchors[i]) }, false);
}

function clickHandler(anchor) {
  var hasClass = anchor.getAttribute('class');
  if (hasClass !== 'active') {
    anchor.setAttribute('class', 'active');
  }
}

Ich hoffe das hilft.

34
Nick Beranek

Dies ist, was ich am Ende habe, da Sie auch die anderen löschen müssen.

$('.navbar li').click(function(e) {
    $('.navbar li.active').removeClass('active');
    var $this = $(this);
    if (!$this.hasClass('active')) {
        $this.addClass('active');
    }
    e.preventDefault();
});
48
David

dies ist mein Code zur Handhabung der Twitter-Bootstrap-Navigationsliste:

$(document).ready(function () {
        $('ul.nav > li').click(function (e) {
            e.preventDefault();
            $('ul.nav > li').removeClass('active');
            $(this).addClass('active');                
        });            
    });
20
hbinduni

Ich verwende 2 1-Liner, je nachdem, wie mein Navi aufgebaut ist

Stellen Sie einfach sicher, dass keine Ihrer Links eine aktive Klasse zum Starten hat.

tatsächliche Links

Wenn sich Ihre Nav-Links in separaten HTML-Dateien befinden (wie eine Layoutvorlage in express.js, die über ein Menü verfügt), können Sie Folgendes tun:

$('ul.nav > li > a[href="' + document.location.pathname + '"]').parent().addClass('active');

hash-Links

Wenn es sich um Hashes handelt, machen Sie folgendes:

$('ul.nav > li > a[href="' + document.location.hash + '"]').click(function(){  $('ul.nav > li').removeClass('active'); $(this).parent().addClass('active'); });

Wenn Sie beim Hash-Klick nicht scrollen möchten, geben Sie false zurück:

 $('ul.nav > li > a[href="' + document.location.hash + '"]').click(function(){  $('ul.nav > li').removeClass('active'); $(this).parent().addClass('active'); return false; });
17
konsumer

Wenn Sie einige der anderen Antworten betrachten, wenn Sie möchten, dass die Webseite beim Klicken auf ein Seitenmenü zu diesem Abschnitt herunterrollt, möchten Sie nicht preventDefault.

Außerdem müssen Sie nur die aktuell aktive Klasse entfernen und eine neue hinzufügen, die nicht alle Li durchsucht. Sie möchten auch, dass der Code nichts tut, wenn das ausgewählte Listenelement bereits aktiv ist. Sie müssen nicht dieselbe aktive Klasse hinzufügen und entfernen. Als letztes sollten Sie Ihren Ereignis-Listener auf ein Element setzen, nicht auf das Li, da es einfacher ist, ein Klick-Ereignis auf iPhones und Tablets usw. auszulösen. Sie könnten auch .delegate verwenden, damit Sie nicht auf ein DOM-Ready-Ereignis warten müssen. Am Ende würde ich so etwas tun (ich gehe davon aus, dass Sie jQuery vorab geladen haben):

$('body').delegate('.menu li a', 'click', function(){
    var $thisLi = $(this).parents('li:first');
    var $ul = $thisLi.parents('ul:first');
    if (!$thisLi.hasClass('active')){
        $ul.find('li.active').removeClass('active');
        $thisLi.addClass('active');
    }
});
8
Mauvis Ledford

Ich empfehle diesen Code:

 <script>
      var curentFile = window.location.pathname.split("/").pop();
      if (curentFile == "") curentFile = "Default.aspx";
      $('ul.nav > li > a[href="' + curentFile + '"]').parent().addClass('active');
 </script>

Es funktioniert wie ein Zauber.

5
ali mahmoodi

Ich habe etwas anderes getan, um das zu lösen (zB, ich bin ein kompletter HTML-/CSS-/Amateur-Amateur). 

Jede meiner Navbar-Schaltflächen wechselt zu einer neuen Seite. Also, in die HTML-Seite jeder Seite stelle ich so etwas wie folgt:

<script type="text/javascript">
    $(document).ready( function(){
       $("#aboutButton").removeClass("active");
    });

    $(document).ready( function(){
       $("#dashboardButton").addClass("active");
    });
</script>

Das hat für mich sofort funktioniert.

P.S. Ich habe die akzeptierte Antwort ausprobiert, hatte aber kein Glück, denn es müsste auch die 'aktive' Klasse von der gerade aktiven Schaltfläche entfernt werden, um wirklich umzuschalten. Ich bin mir sicher, dass es möglich ist, aber ich bin noch ziemlich neu in diesem Zeug.

3
csturtz

Getestet und es funktioniert gut.

    $('.navbar li').click(function(e) {
        $('.navbar li.active').removeClass('active');
        var $this = $(this);
        if (!$this.hasClass('active')) {
            $this.addClass('active');
        }

    });

  <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            . . . 
  </ul>
3
Marios Nikolaou

wenn Sie Probleme mit jsp haben, achten Sie auf Ihre Pakete.

document.location.pathname gab mir: /packagename/index.jsp

aber meine href in meiner navbar rief nur index.jsp an

So bearbeiten Sie die Antwort von konsumer:

$(document).ready(function() {
   var string = document.location.pathname.replace('/Package Name/','');
   $('ul.nav > li > a[href="' + string + '"]').parent().addClass('active');
} );
2
FredoAF

Ich habe einige der Top-Antworten oben ausprobiert, es funktioniert für die ".active" -Klasse, aber die Links funktionieren nicht gut, sie bleiben jedoch auf der aktuellen Seite. Dann habe ich es versucht:

var url = window.location;
// Will only work if string in href matches with location
$('ul.nav a[href="' + url + '"]').parent().addClass('active');
// Will also work for relative and absolute hrefs
$('ul.nav a').filter(function() {
    return this.href == url;
}).parent().addClass('active');

Ich habe es hier gefunden: Twitter Bootstrap aktive Klasse zu li hinzufügen

1
whyisyoung
<ul class="main-menu">
    <li><a href="~/Cases/Index"><i class="fa fa-font fa-fw"></i><span class="text">Audit Case</span></a></li>
    <li><a href="~/Cases/Auditplan"><i class="fa fa-font fa-fw"></i><span class="text">Audit Plan</span></a></li>
    <li><a href="~/Cases/Auditreport"><i class="fa fa-font fa-fw"></i><span class="text">Audit Report</span></a></li>
    <li><a href="~/Cases/Company"><i class="fa fa-font fa-fw"></i><span class="text">Company Details</span></a></li>
</ul>

<script>
$(function(){
  $('.main-menu li > a[href="' + document.location.pathname + '"]').parent().addClass('active').siblings().removeClass('active');
})
</script>
1
Luke Bhangyi

Fügen Sie Ihrem JavaScript hinzu:

$(".menu li").click(function(e) {
    $(".menu li").removeClass("active");
    $(this).addClass("active");
    e.preventDefault();
});
0
Peter Tseng

Dies wird ziemlich alt und mit Antworten gebündelt, aber ich habe die beste Antwort genommen und es besser gemacht. Die oberste Antwort funktioniert nur, wenn auf der Seite eine vorhanden ist. Dadurch werden aktive Elemente aus sibling-Elementen entfernt und zu dem Element hinzugefügt, auf das Sie geklickt haben.

Ich habe auch die Klasse nav-toggle hinzugefügt, damit Dinge, an denen bereits Bootstrap-Js angehängt sind, nicht beeinträchtigt werden.

$('.nav.nav-toggle li').click(function(e) {
  var $this = $(this);
  $this.siblings().removeClass('active');
  if (!$this.hasClass('active')) {
      $this.addClass('active');
  }
  e.preventDefault();
});
0
Tom Prats