javascript - jQuery 两个选项卡

Question

我有两个选项卡:登录和注册。这很简单，单击注册选项卡时隐藏登录部分，反之亦然。当我单击注册选项卡时，登录部分被隐藏并且可以正常工作，但是当我尝试再次单击登录选项卡时，一切都搞砸了。

代码如下:

jsfiddle.net/gdc5ryqj/

Answer 1

我在这里创建了你的 fiddle 的分支:

http://jsfiddle.net/fn5yjrgw/

看来您正在使用 bootstrap，所以我建议您尽可能使用 bootstrap 选项卡并只应用您的样式，但如果这不是一个选项，这里有一个示例(链接到上面的 jsfiddle)。

HTML: 我将选项卡用于确定事件状态的元素更改为 <div> , 而不是 <p> ，并在登录选项卡上放置一个“事件”类，使其成为默认显示的。

我在你的 CSS 的最后添加了几行:

/*** Additional Styles (ryantdecker) ***/
#tab-login, #tab-register {display:none;}
#tab-login.tab-active, #tab-register.tab-active {display:block;}
.login-reg-tab {}
.login-reg-tab.active p {
    color: #E76E5D;
    border-bottom: 3px solid;}

最后，jQuery 只是简单地分别从选项卡和面板区域中删除 active 和 tab-active 类，然后根据单击的元素将它们添加回适当的类，以便 CSS 负责隐藏和显示

$(document).ready(function(){

    $('.login-button').click(function(){

        $('.login-reg-tab').removeClass('active');
        $(this).addClass('active');
        $('.login-reg-input-holder').removeClass('tab-active');
        $('#tab-login').addClass('tab-active');
    });

    $('.register-button').click(function(){
        $('.login-reg-tab').removeClass('active');
        $(this).addClass('active');
        $('.login-reg-input-holder').removeClass('tab-active');
        $('#tab-register').addClass('tab-active');

    });
});

(肯定有一些方法可以使它变得更简单，但必须对标记和类进行相当多的修改，而且我看到您有一个可能需要重构的疯狂大 CSS 文件。)