Question

我对jQuery很新。

我有两个菜单选项卡，并且我试图在单击时使用标签'b'来标记'a'来切换（切换）类。

使用.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

我的建议是使用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/

Answer 2

您实际使用.attr执行的操作只是获取不存在的假定static-color属性的值。

诀窍是使用.addClass .removeClass或本例.toggleClass。

我的另一个提示是使用.on jQuery方法使用事件委托。这将允许更灵活的事件处理。您实际上是将侦听器附加到父元素，该元素将侦听来自与指定选择器匹配的另一个元素的事件，如下所示：

$("#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 3

“active-color”不是属性。

你的意思是改用CSS或类吗？

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

变为

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

或者要反转它，只需切换类的名称：

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

在click上使用toggleClass - jQuery

3 个答案: