jQuery - Добавить активный класс и удалить активный из другого элемента при нажатии

Я новичок в jQuery, поэтому я сожалею, если это глупый вопрос. Но я просматриваю Stack Overflow, и я могу найти то, что наполовину работает, я просто не могу заставить его полностью работать.

У меня есть 2 вкладки - 1 активен, другой - нет. Как только щелкнуть неактивную вкладку, я хочу, чтобы ей был присвоен класс active и предыдущий активный класс, который нужно удалить. И наоборот, каждый раз, когда нажимается неактивная вкладка.

Любая помощь будет замечательной!

Вот что я сейчас имею: http://jsfiddle.net/zLpe5/

Здесь я попытался добавить и удалить класс:

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

Если бы кто-нибудь мог помочь с слиянием двух бит скрипта в моей скрипке, это тоже было бы огромной помощью. Поскольку я довольно смущен, как это делается!

Спасибо :)

Ответ 1

Попробуй это

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

когда вы используете $(".tab").addClass("active"); , он нацелен на все элементы с именем класса .tab. Вместо этого, когда вы используете this он ищет элемент, который имеет событие, в вашем случае элемент, который нажат.

Надеюсь, это поможет вам.

Ответ 2

Вы можете удалить класс active из всех .tab и использовать $(this) целевой текущий щелкнул .tab:

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

Ваш код не будет работать, потому что после удаления класса active из всех .tab, вы также добавить класс active ко всему .tab снова. Поэтому вам нужно использовать $(this) вместо $('.tab') чтобы добавить класс active только к .tab anchor

Обновленный скрипт

Ответ 3

Вы удалили активный класс со всех вкладок, но затем снова добавили активный класс ко всем вкладкам. Вы должны только добавить активный класс к текущей вкладке, подобной так: http://jsfiddle.net/QFnRa/

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

Ответ 4

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

Ответ 5

Используйте jquery cookie https://github.com/carhartl/jquery-cookie, а затем вы можете быть уверены, что класс останется на странице обновления.

Сохраняет идентификатор элемента clicked в cookie, а затем использует его для добавления класса при обновлении.

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

Ответ 6

Попробуй это:

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