web-dev-qa-db-fra.com

jQuery - Ajouter une classe active et supprimer active d'un autre élément en un clic

Je suis nouveau sur jQuery, donc je suis désolé si c'est une question idiote. Mais j'ai regardé à travers Stack Overflow et je peux trouver des choses qui fonctionnent à moitié, je ne peux tout simplement pas le faire fonctionner pleinement.

J'ai 2 onglets - 1 est actif, l'autre ne l'est pas. Une fois que l'onglet inactif est cliqué, je souhaite que la classe active soit attribuée et que la classe active précédente soit supprimée. Et vice versa chaque fois qu'un onglet inactif est cliqué.

Toute aide est la bienvenue!

Voici ce que j'ai actuellement: http://jsfiddle.net/zLpe5/

Voici ce que j'ai essayé d'ajouter et de supprimer la classe:

$(document).ready(function() {
$(".tab").click(function () {
    $(".tab").removeClass("active");
    $(".tab").addClass("active");        
});
});

Si quelqu'un pouvait aider à fusionner les 2 morceaux de script de mon violon, ce serait aussi une aide précieuse. Comme je suis assez confus sur la façon dont cela se fait!

Je vous remercie :)

javascriptjqueryhtmlcss
13
Nick

Essaye ça

$(document).ready(function() {
$(".tab").click(function () {
    $(".tab").removeClass("active");
    // $(".tab").addClass("active"); // instead of this do the below 
    $(this).addClass("active");   
});
});

lorsque vous utilisez $(".tab").addClass("active");, il cible tous les éléments avec le nom de classe .tab. Au lieu de cela, lorsque vous utilisez this, il recherche l'élément qui a un événement, dans votre cas, l'élément qui est cliqué.

J'espère que cela vous aidera.

36
James

Vous pouvez supprimer la classe active de tous les .tab Et utiliser $(this) pour cibler le clic actuel .tab:

$(document).ready(function() {
    $(".tab").click(function () {
        $(".tab").removeClass("active");
        $(this).addClass("active");     
    });
});

Votre code ne fonctionnera pas car après avoir supprimé la classe active de tous les .tab, Vous ajouterez également la classe active à tous les .tab. Vous devez donc utiliser $(this) au lieu de $('.tab') pour ajouter la classe active uniquement à l'ancre cliquée .tab

Fiddle mis à jour

8
Felix
$(document).ready(function() {
    $(".tab").click(function () {
        if(!$(this).hasClass('active'))
        {
            $(".tab.active").removeClass("active");
            $(this).addClass("active");        
        }
    });
});
4
demonofthemist

Utilisez le cookie jquery https://github.com/carhartl/jquery-cookie et alors vous pouvez être sûr que la classe restera sur l'actualisation de la page.

Stocke l'id de l'élément cliqué dans le cookie, puis l'utilise pour ajouter la classe lors de l'actualisation.

        //Get cookie value and set active
        var tab = $.cookie('active');
        $('#' + tab).addClass('active');

        //Set cookie active tab value on click
        //Done this way to preserve after page refresh
        $('.topTab').click(function (event) {
            var clickedTab = event.target.id;
            $.removeCookie('active', { path: '/' });
            $( '.active' ).removeClass( 'active' );
            $.cookie('active', clickedTab, { path: '/' });
        });
3
Gary

Essaye celui-là:

$(document).ready(function() {
    $(".tab").click(function () {
        $("this").addClass("active").siblings().removeClass("active");   
    });
});
3
hamidreza samsami

Vous avez déjà supprimé la classe active de tous les onglets, mais vous ajoutez à nouveau la classe active à tous les onglets. Vous devez uniquement ajouter la classe active à l'onglet actuellement sélectionné comme ceci http://jsfiddle.net/QFnRa/

$(".tab").removeClass("active");
$(this).addClass("active");
3
mayrs