Question

我有一个带有两个按钮“login”和“register”的启动页面。到目前为止，我设法获得的代码是： 1.单击按钮时展开登录并注册表单（div）。 2.如果已经可见，则隐藏另一个表单（一次只能显示一个表单，一次只能处于“按下状态”的一个表单）。 3.按下时更改按钮背景，可以看到相应的面板。

到目前为止这是代码：

$(function() {
                $('#login').click(function() {
                    $('.login').slideToggle('fast');
                    $('.register:visible').slideToggle('fast');
                    $("#register").css("background", "rgba(255,0,0,0.8)");
                    $("#login").css("background", "rgba(255,0,0,0.6)");
                    return false;
                });
                $('#register').click(function() {
                    $('.register').slideToggle('fast');
                    $('.login:visible').slideToggle('fast');
                    $("#login").css("background", "rgba(255,0,0,0.8)");
                    $("#register").css("background", "rgba(255,0,0,0.6)");
                    return false;
                });
            });

上面代码的问题是当我隐藏两个面板时，其中一个按钮保持“按下状态”rgba（255,0,0,0.6）..另外我想添加一个悬停效果按钮没有按下，我怎么能这样做呢？

非常感谢你，我是jquery的新手，我正在努力..

Answer 1

首先，我建议添加和删除CSS类，而不是直接更改CSS属性 - 它可能会清除一些错误，但不确定：$('#register').addClass('btnClicked');

您可以像这样添加悬停效果：

$('#login, #register').hover(function() {
    $(this).addClass('btnHover');
}, function() {
    $(this).removeClass('btnHover');
}

当然，如果你想保留你的风格，只需将悬停的CSS代码放在第一个函数中，然后在第二个函数中将其恢复为正常。

jQuery切换面板，背景更改

1 个答案: