Использование toggleClass при нажатии - jQuery

Question

Я очень новичок в jQuery.

У меня есть две вкладки меню, и я пытаюсь получить вкладку 'a' для переключения (переключения) классов с вкладкой 'b' при щелчке.

Использование метода .attr не работает. Я также попытался переключить его с помощью toggleClass, но все равно ничего.

// toggle between login/register 
$(".static-color").click(function() { 
    $("#login").hide(); 
    $("#register").show(); 

    $(this).attr("active-color"); 
    $(".active-color").attr("static-color"); 

}); 

// toggle between login/register 
$(".active-color").click(function() { 
    $("#login").show(); 
    $("#register").hide(); 

    $(this).attr("static-color"); 
    $(".static-color").attr("active-color"); 
}); 

http://jsfiddle.net/h3Y6G/

Answer 1

То, что вы на самом деле делать с .attr просто получаю значение предполагаемого static-color атрибута, который не существует.

Трюк использует .addClass.removeClass или в этом случае .toggleClass.

Еще один совет, который у меня есть для вас, - это использование делегирования событий с помощью метода jQuery .on. Это позволит более гибко управлять событиями. Вы на самом деле прикрепление слушателя к родительскому элементу, который будет прослушивать события, поступающих от другого элемента совпадает с указанным селектором, например:

$("#login-register").on('click', '.static-color', function() { 
    $('.active-color, .static-color').toggleClass("active-color static-color"); 
    $("#login, #register").toggle(); 
}); 

Кроме того, я вижу, у вас есть немного дублирования, попробуйте сделать код более многоразового использования. Don't Repeat Yourself!

Я обновил свою скрипку: http://jsfiddle.net/h3Y6G/1/

Answer 2

"активного цвета" не является атрибутом.

Не могли бы вы переключить CSS или класс?

$(this).attr("active-color"); 

становится

$(this).addClass('active-color').removeClass('static-color'); 

или отменить его, просто переключить имена классов:

$(this).addClass('static-color').removeClass('active-color'); 

Answer 3

Мое предложение было бы использовать button класс в качестве селектора для выбора переключателя классов и удалить класс static. Вы можете предположить, что если ваша кнопка не является «активной», то неявно она будет «статичной», и вы должны соответственно их подстроить.

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

$('.button').click(function() { 
    // remove active class from all buttons 
    $('.button').removeClass('active-color'); 
    // add it to the current clicked button 
    $(this).addClass('active-color'); 
    // get button type and deal with content accordingly 
    var button_type = $(this).text().trim(); 
    if(button_type == "Register") { 
     $("#register").show(); 
     $("#login").hide(); 
    } else if(button_type == "Log-In") { 
     $("#login").show(); 
     $("#register").hide(); 
    } 
}); 

JSFiddle: http://jsfiddle.net/h3Y6G/2/