Bootstrap-CSS-Active Navigation

Question

Auf der Bootstrap-website der subnav übereinstimmungen mit den Abschnitten und änderungen, hintergrund Farbe, wie Sie, oder Blättern Sie zu der Rubrik.Ich wollte mein eigenes Menü, ohne allen hintergrund-Farben und alles, aber ich verändert mein CSS ähnlich zu sein, aber wenn ich scrollen Sie nach unten oder klicken Sie auf den Menüpunkt aktive Klasse nicht wechseln.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 Dateien;jQuery, bootstrap.js und bootstrap.css sind alle richtig verknüpft.Tun ich haben zu fügen Sie einige zusätzliche jQuery-in oder übersehe ich etwas CSS, um die aktiven zu wechseln wie die subnav-Menü auf Ihrer Website?

Answer 1

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.

Answer 2

Das habe ich am Ende gemacht, da Sie auch die anderen räumen müssen.

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

Answer 3

Dies ist mein Code für die Behandlung von Twitter Bootstrap Navigation List:

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

Answer 4

Ich benutze 2 1-Liner, je nachdem, wie meine Marine strukturiert ist

Stellen Sie einfach sicher, dass keine Ihrer Links eine aktive Klasse hat, um zu beginnen.

tatsächliche Links

Wenn sich Ihre NAV -Links auf separaten HTML -Dateien befinden (wie eine Layout -Vorlage in Express.js, die ein Menü enthält), können Sie dies tun:

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

Hash -Links

Wenn sie Hashes sind, tun Sie Folgendes:

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

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

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

Answer 5

Wenn Sie sich einige der anderen Antworten ansehen. Wenn Sie möchten, dass die Webseite zu diesem Abschnitt nach unten scrollen, wenn ein Seitenmenü klickt, möchten Sie nicht preventDefault.

Darüber hinaus müssen Sie nur die aktuelle aktive Klasse entfernen und eine neue hinzufügen, die nicht alle LIs durchsucht. Sie möchten auch, dass der Code nichts tut, wenn das von Ihnen ausgewählte Listenelement bereits aktiv ist. Nicht unnötig hinzuzufügen und dieselbe aktive Klasse zu entfernen. Zuletzt sollten Sie Ihren Event -Hörer auf das A -Element nicht das Li setzen .delegate Sie müssen also nicht auf ein Dom -Ready -Ereignis warten. Am Ende würde ich also so etwas tun (ich nehme an, Sie haben JQuery vorgeladen):

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

Answer 6

Ich schlage diesen Code vor:

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

Es ist Arbeit wie ein Zauber.

Answer 7

Ich habe etwas anderes getan, um dies zu lösen (FYI, ich bin ein vollständiger HTML/CSS/JS -Amateur).

Jede meiner Navigationsschaltflächen geht zu einer neuen Seite. In HTML jeder Seite habe ich so etwas unten so etwas gestellt:

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

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

Das hat es für mich sofort zum Laufen gebracht.

PS Ich habe die akzeptierte Antwort ausprobiert, hatte aber kein Glück, da sie auch die "aktive" Klasse von der aktuell aktiven Taste entfernen müsste, um wirklich zu "wechseln". Ich bin sicher, es ist möglich, aber wieder bin ich ziemlich neu in diesem Zeug.

Answer 8

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>

Answer 9

wer Probleme mit dieser Verwendung jsp, sehen Sie Ihre Pakete.

Dokument.Lage.pathname mir gab:/packagename/index.jsp

aber meine href meiner navbar als nur index.jsp

So Bearbeiten konsumer Antwort:

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

Answer 10

Ich habe einige der oberen Antworten oben ausprobiert, es funktioniert für ".Active" -Klasse, aber die Links funktionieren nicht gut, es bleibt immer noch auf der aktuellen Seite. Dann habe ich das 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 Fügen Sie LI aktive Klasse hinzu

Answer 11

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

Answer 12

Fügen Sie Ihrem JavaScript hinzu:

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

Answer 13

Das wird ziemlich alt und wird mit Antworten zusammengefasst, aber ich habe die Top -Antwort genommen und es besser gemacht. Die Top -Antwort funktioniert nur, wenn sich auf der Seite eine befindet. Dadurch werden es abgebildet, um aktiv aus zu entfernen sibling Elemente und Hinzufügen zu dem, den Sie geklickt haben.

Ich habe auch die Klasse hinzugefügt nav-toggle so dass es nicht die Dinge beeinträchtigt, die bereits Bootstrap JS angehängt haben.

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