wake-up-neo.net

so legen Sie für die aktive Klasse das Navigationsmenü von Twitter-Bootstrap fest

Ich bin neu im Twitter Bootstrap . Verwendung von Navigationsmenüs . Ich versuche, die aktive Klasse auf das ausgewählte Menü zu setzen. mein Menü ist - 

<div class="nav-collapse">
  <ul class="nav">
    <li id="home" class="active"><a href="~/Home/Index">Home</a></li>
    <li><a href="#">Project</a></li>
    <li><a href="#">Customer</a></li>
    <li><a href="#">Staff</a></li>
    <li  id="broker"><a href="~/Home/Broker">Broker</a></li>
    <li><a href="#">Sale</a></li>
  </ul>
</div>

Ich habe folgendes versucht, nachdem ich darauf gegoogelt habe, dass ich auf jeder Seite eine aktive Klasse aus dem Menü wie as-- einstellen muss.

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

aber das Problem für oben ist, dass ich das standardmäßig ausgewählte Hauptmenü eingestellt habe. Dann wird es immer ausgewählt. Gibt es eine andere Möglichkeit, dies zu tun? , oder was kann ich verallgemeinern und meine Js in der Layoutdatei selbst behalten?  

Nach dem Ausführen der Anwendung sieht mein Menü aus - enter image description here

nachdem ich auf einen anderen Menüpunkt geklickt habe, erhalte ich folgendes Ergebnis -enter image description here

Und ich habe folgende Skripte in der Indexansicht und Brokeransicht hinzugefügt.

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

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

beziehungsweise.

23
Priyanka

es ist ein Workaround. Versuchen 

<div class="nav-collapse">
  <ul class="nav">
    <li id="home" class="active"><a href="~/Home/Index">Home</a></li>
    <li><a href="#">Project</a></li>
    <li><a href="#">Customer</a></li>
    <li><a href="#">Staff</a></li>
    <li  id="demo"><a href="~/Home/demo">Broker</a></li>
    <li id='sale'><a href="#">Sale</a></li>
  </ul>
</div>

und auf jeder Seite js hinzufügen

$(document).ready(function () {
  $(".nav li").removeClass("active");//this will remove the active class from  
                                     //previously active menu item 
  $('#home').addClass('active');
  //for demo
  //$('#demo').addClass('active');
  //for sale 
  //$('#sale').addClass('active');
});
18
dakait

Sie können diesen JavaScript\jQuery-Code verwenden:

// Sets active link in Bootstrap menu
// Add this code in a central place used\shared by all pages
// like your _Layout.cshtml in ASP.NET MVC for example
$('a[href="' + this.location.pathname + '"]').parents('li,ul').addClass('active');

Es setzt den übergeordneten <a> von <li> und den <li> von <ul> als aktiv.

Eine einfache Lösung, die funktioniert!


Originalquelle:

Bootstrap fügt aktive Klasse zu li hinzu

68

Ich hatte das gleiche Problem ... es wurde behoben, indem der unten abgebildete Code zu Into "$ (document) .ready" meiner "functions.js" -Datei hinzugefügt wurde, die in jeder Seitenfußzeile enthalten ist. Es ist ziemlich einfach. Es ruft die vollständige aktuelle URL der angezeigten Seite ab und vergleicht sie mit der vollständigen Ankerreferenz-URL. Wenn sie gleich sind, setzen Sie den übergeordneten Anker (li) als aktiv. Tun Sie dies nur, wenn der Ankerhref-Wert nicht "#" ist. Der Bootstrap löst es dann. 

$(document).ready(function () {         
    $(function(){
        var current_page_URL = location.href;

        $( "a" ).each(function() {

            if ($(this).attr("href") !== "#") {

                var target_URL = $(this).prop("href");

                    if (target_URL == current_page_URL) {
                        $('nav a').parents('li, ul').removeClass('active');
                        $(this).parent('li').addClass('active');

                        return false;
                    }
            }
        }); }); });
3
Mirko
<div class="nav-collapse">
                <ul class="nav">
                    <li class="home"><a href="~/Home/Index">Home</a></li>
                    <li class="Project"><a href="#">Project</a></li>
                    <li class="Customer"><a href="#">Customer</a></li>
                    <li class="Staff"><a href="#">Staff</a></li>
                    <li class="Broker"><a href="~/Home/Broker">Broker</a></li>
                    <li class="Sale"><a href="#">Sale</a></li>
                </ul>
</div>

dann fügen Sie für jede Seite Folgendes hinzu:

//Zuhause

 $(document).ready(function () {
        $('.home').addClass('active');
    });

// Projektseite

$(document).ready(function () {
            $('.Project').addClass('active');
        });

// Kundenseite

 $(document).ready(function () {
                $('.Customer').addClass('active');
            });

// Personalseite 

 $(document).ready(function () {
                $('.Staff').addClass('active');
            });
1
anyavacy

Sie könnten dem BODY-Tag auf jeder Seite eine andere Klasse hinzufügen, z. auf der homepage könnte man folgendes haben:

<body class="nav-1-on">

Dann diese css:

.nav-1-on .nav-1 a, .nav-2-on .nav-2 a, .nav-3-on .nav-3 a, .nav-4-on .nav-4 a {
     // set your styles here
}

Das NAV-Element:

<ul>
  <li class="nav-1"><a href="#">Home</a></li>
  <li class="nav-2"><a href="#">Services</a></li>
  <li class="nav-3"><a href="#">About</a></li>
  <li class="nav-4"><a href="#">Contact</a></li>
</ul>

Alternativ können Sie auf jeder Seite eine Klasse im BODY platzieren, diese dann über jQuery verwenden und die .active-Klasse zum richtigen nav-Element hinzufügen, das auf diesem Tag basiert.

1
Billy Moat
<div class="nav-collapse">
                <ul class="nav">
                    <li class="home"><a href="~/Home/Index">Home</a></li>
                    <li class="Project"><a href="#">Project</a></li>
                    <li class="Customer"><a href="#">Customer</a></li>
                    <li class="Staff"><a href="#">Staff</a></li>
                    <li class="Broker"><a href="~/Home/Broker">Broker</a></li>
                    <li class="Sale"><a href="#">Sale</a></li>
                </ul>
</div>

$('ul.nav>li.home>a').click();  // first. same to all the other options changing the li class name 
1
Apeto

Ich verwende Flask Bootstrap . Meine Lösung ist etwas einfacher, da meine Vorlage bereits die Option oder Auswahl als Parameter von Flask erhält. 

var choice = document.getElementById("{{ item_kind }}");
choice.className += "active";

In der ersten Zeile erhält der Code js das Element. Daher sollten Sie jedes Element mit einer ID identifizieren. Ich werde ein Beispiel unten zeigen. Zweite Zeile, fügen Sie die Klasse aktiv hinzu. Sie können HTML-IDs unten sehen. 

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav"> 
        <li>
            <a id="speed" href="{{ url_for('list_gold_per_item',item_kind='speed',level='2') }}">
                <h2>Speed</h2>
            </a>
        </li>
        <li>
            <a id="life" href="{{ url_for('list_gold_per_item',item_kind='life',level='3') }}">
                <h2>Life</h2>
            </a>
        </li>
    </ul>
</div>

0
alexmoitta
(function (window) {
bs3Utils = {}
bs3Utils.nav = {
    activeTab: function (tabId) {
        /// <summary>
        /// 设置需要展现的tab
        /// </summary>
        /// <param name="tabId"></param>
        $('.nav-tabs a[href="#' + tabId + '"]').tab('show');
    }
}
window.bs3Utils = bs3Utils;
})(window);

beispiel:

var _actvieTab = _type == '0' ? 'portlet_tab2_1' : 'portlet_tab2_2';
            bs3Utils.nav.activeTab(_actvieTab);
                        <ul class="nav nav-tabs">
                        <li class="active">
                            <a href="#portlet_tab2_1" data-toggle="tab">箱-单灯节点 </a>
                        </li>
                        <li>
                            <a href="#portlet_tab2_2" data-toggle="tab">箱-灯组节点 </a>
                        </li>

                    </ul>
0
YanZhiwei

Für Einzelseiten-Sites habe ich Folgendes verwendet. Das aktive Element wird nicht nur basierend auf dem, was angeklickt wurde, festgelegt, sondern es wird auch beim ersten Laden der Seite nach einem Hashwert innerhalb des URL-Speicherorts gesucht.

$(document).ready(function () {

    var removeActive = function() {
        $( "nav a" ).parents( "li, ul" ).removeClass("active");
    };

    $( ".nav li" ).click(function() {
        removeActive();
        $(this).addClass( "active" );
    });

    removeActive();
    $( "a[href='" + location.hash + "']" ).parent( "li" ).addClass( "active" );

});
0
bchr02
$( ".nav li" ).click(function() {
        $('.nav li').removeClass('active');
        $(this).addClass('active');
    });

schau dir das an. 

0
Hardik Gajjar

Für einseitige Websites, bei denen die Menüelemente einfach in andere Bereiche der Seite springen, funktioniert diese einfache Lösung für mich:

$('.nav li').on('click', function(){
    $('.nav li').removeClass('active');
    $(this).addClass('active');
  });
0
Luke Green