web-dev-qa-db-fra.com

Comment changer de classe active en cliquant sur un autre lien dans bootstrap, utilisez jquery

J'ai un code HTML comme barre latérale et utilise Bootstrap.

<ul class="nav nav-list">
    <li class="active"><a href="/">Link 1</a></li>
    <li><a href="/link2">Link 2</a></li>
    <li><a href="/link3">Link 3</a></li>
</ul>

Je veux faire quelque chose:

Lorsque je click un lien tel que Link 3, le page content sera remplacé par le contenu du lien 3 et que le lien 3 aura la classe active et supprimera le fichier clss actif dans le lien 1.

Je pense que cela peut être implémenté dans jQuery, et j'ai cherché beaucoup de questions dans SO, telles que:

J'utilise ce script:

$(document).ready(function () {
    $('.nav li').click(function(e) {

        $('.nav li').removeClass('active');

        var $this = $(this);
        if (!$this.hasClass('active')) {
            $this.addClass('active');
        }
        //e.preventDefault();
    });
});

Mais la plupart d'entre eux utilisent preventDefault, cela empêchera la poursuite de l'action. Donc, cela ne peut pas changer au contenu de la page de Link 3.

Si je supprime l'instruction preventDefault, lorsque la page charge le contenu de Link 3, la classe active revient à Link 1.

Alors, y a-t-il un moyen de résoudre ce problème?

javascriptjqueryhtmltwitter-bootstrap
7
Tanky Woo

Vous vous liez en cliquant sur le mauvais élément, vous devriez le lier à la a.

Vous empêchez qu'un événement par défaut se produise sur la li, mais li n'a pas de comportement par défaut, a l'a.

Essaye ça:

$(document).ready(function () {
    $('.nav li a').click(function(e) {

        $('.nav li.active').removeClass('active');

        var $parent = $(this).parent();
        $parent.addClass('active');
        e.preventDefault();
    });
});
24
Karl-André Gagnon

J'utilise la navigation bootstrap

Cela a fait le travail pour moi, y compris les menus déroulants principaux actifs et les enfants actifs 

$(document).ready(function () {
        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').parent().parent().addClass('active');
    });
5
Fazil Khan

Si vous changez les classes et chargez le contenu dans la même fonction, tout devrait bien se passer.

$(document).ready(function(){
    $('.nav li').click(function(event){
        //remove all pre-existing active classes
        $('.active').removeClass('active');

        //add the active class to the link we clicked
        $(this).addClass('active');

        //Load the content
        //e.g.
        //load the page that the link was pointing to
        //$('#content').load($(this).find(a).attr('href'));      

        event.preventDefault();
    });
});
2
Daniel Apt
<script type="text/javascript">
$(document).ready(function(){
    $('.nav li').click(function(){
        $(this).addClass('active');
        $(this).siblings().removeClass('active');

    });

});

1
Milan

J'ai eu le même problème avant .. .. Essayez cette réponse ici, cela fonctionne sur mon site.

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

Source: C'était original posté ici comment définir la classe active dans le menu de navigation à partir de Twitter bootstrap

0
hsusyh

Si vous utilisez un code côté serveur tel que Java, vous devez renvoyer le nom de l'onglet actif et, sur la page de retour, une fonction permet de désactiver (ce qui signifie supprimer la classe active) tous les onglets sauf celui que vous avez renvoyé. 

Cela nécessiterait que vous ajoutiez un identifiant ou un nom à chaque onglet. Un peu plus de travail :)

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

C’est ce que j’ai trouvé avec Il vérifie si l’élément "li" a la classe d’actif, sinon il saute la partie de la classe de suppression . Je suis un peu en retard pour la fête, mais espérons que cela aide. :)

0
Didiencho

Vous pouvez utiliser des cookies pour enregistrer les données de publication d'une page sur une autre page. Après avoir passé beaucoup de temps, j'ai finalement pu y arriver. Je suggère ma réponse à vous (cela fonctionne pleinement puisque j'ai aussi eu besoin de cela).

commencez par donner votre balise li à un identifiant valide comme

<ul class="nav nav-list">
    <li id="tab1" class="active"><a href="/">Link 1</a></li>
    <li id="tab2"><a href="/link2">Link 2</a></li>
    <li id="tab3"><a href="/link3">Link 3</a></li>
</ul>

Après cela, copiez et collez ce script… .. depuis que j’ai écrit du javascript pour lire, supprimer et créer des cookies.

 $('.nav li a').click(function (e) {
  
        var $parent = $(this).parent();
        document.cookie = eraseCookie("tab");
        document.cookie = createCookie("tab", $parent.attr('id'),0);
 });

    $().ready(function () {
        var $activeTab = readCookie("tab");
        if (!$activeTab =="") {
        $('#tab1').removeClass('ActiveTab');
          }
       // alert($activeTab.toString());
       
        $('#'+$activeTab).addClass('active');
    });

function createCookie(name, value, days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        var expires = "; expires=" + date.toGMTString();
    }
    else var expires = "";

    document.cookie = name + "=" + value + expires + "; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}

function eraseCookie(name) {
    createCookie(name, "", -1);
}

Remarque: Assurez-vous que vous avez implémenté selon vos besoins. J'ai écrit ce script en fonction de mon implémentation et de son bon fonctionnement pour moi.

0
Rajput