web-dev-qa-db-fra.com

comment définir la classe active dans le menu de navigation à partir de Twitter

Je suis nouveau sur le Twitter bootstrap. En utilisant les menus de navigation. J'essaie de définir la classe active au menu sélectionné. mon menu est - 

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

J'ai essayé de suivre une chose après avoir googlé sur ce que je dois définir la classe active sur chaque page du menu comme as--

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

mais le problème pour ci-dessus est que je règle le menu d'accueil sélectionné par défaut Ensuite, il est toujours sélectionné. Y a-t-un autre moyen de faire ça ? , ou que je peux généraliser et garder mon js dans le fichier de mise en page lui-même? 

Après l'exécution de l'application, mon menu a l'air - enter image description here

après avoir cliqué sur un autre élément du menu, le résultat suivant est obtenu.enter image description here

Et j'ai ajouté les scripts suivants sur la vue Index et la vue Broker ---

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

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

respectivement.

javascriptjquerycsstwitter-bootstrapmenu
23
Priyanka

c'est une solution de contournement. essayer 

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

et sur chaque page js ajouter

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

Vous pouvez utiliser ce code JavaScript\jQuery:

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

Il va définir le <a> du <li> et le <li> du <ul> comme étant actifs.

Une solution simple qui fonctionne!

Source primaire:

Bootstrap ajoute une classe active à li

68
Leniel Maccaferri

J'ai eu le même problème ... résolu en ajoutant le code ci-dessous à la partie "$ (document) .ready" de mon fichier "functions.js" qui est inclus dans chaque pied de page. C'est assez simple. Il obtient l'URL actuelle complète de la page affichée et la compare à l'URL d'ancrage complète href. Si elles sont identiques, définissez ancre (li) parent comme actif. Et ne le faites que si la valeur d'ancrage href n'est pas "#", le bootstrap le résoudra. 

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

alors pour chaque page vous ajoutez ceci:

//maison

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

// page de projet

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

// page client

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

// page de personnel 

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

Vous pouvez ajouter une classe différente sur la balise BODY de chaque page, par exemple. sur la page d'accueil, vous pouvez avoir ceci:

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

Puis ce 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
}

L'élément NAV:

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

Vous pouvez également placer une classe sur le CORPS de chaque page, puis la récupérer via jQuery et ajouter la classe .active à l'élément de navigation approprié en fonction de cette balise.

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

J'utilise Flask Bootstrap . Ma solution est un peu plus simple car mon modèle reçoit déjà l'option ou le choix en tant que paramètre de Flask. 

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

Première ligne, le code js obtient l'élément. Donc, vous devriez identifier chacun des éléments avec un identifiant. Je vais montrer un exemple ci-dessous. Deuxième ligne, vous ajoutez la classe active. Vous pouvez voir les identifiants HTML ci-dessous. 

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

exemple:

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

Pour les sites à une seule page, voici ce que j’ai utilisé. Non seulement il définit l'élément actif en fonction des éléments cliqués, mais il vérifie également la présence d'une valeur de hachage dans l'emplacement de l'URL lors du chargement initial de la page.

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

regarde ça. 

0
Hardik Gajjar

Pour les sites d'une seule page où les éléments de menu passent simplement à d'autres sections de la page, cette solution simple fonctionne pour moi:

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