jQuery两个选项卡

jQuery Two Tabs

本文关键字：两个 选项 jQuery      更新时间：2023-09-26

我有两个选项卡:login &登记。这很简单，当注册选项卡被点击时隐藏登录部分，反之亦然。当我点击注册选项卡，登录部分是隐藏的，它的工作，但当我尝试再次点击登录选项卡，一切都搞砸了。

代码如下:

jsfiddle.net/gdc5ryqj/

我在这里创建了一个小提琴的分叉:

http://jsfiddle.net/fn5yjrgw/

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

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

我在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简单地从选项卡和面板区域分别删除活动类和选项卡活动类，然后根据单击的元素将它们添加回适当的类，以便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文件，可能需要重构。)

您忘记为"tab-active"添加类了

$(".register-button").click(function () {
    if ($("#tab-login").hasClass("tab-active")) {
        $("#tab-login").removeClass("tab-active");
        if($(".login-button p").hasClass("login-reg-text-active")){
            $(".login-button p").removeClass("login-reg-text-active");}
        $("#tab-login").toggle();
    }
    if($('#tab-login').hasClass('tab-active')) {
        $('#tab-register').hide();
    }
    $("#tab-register").show();
    $(".register-button p").addClass("login-reg-text-active");
    $("#tab-register").addClass("tab-active")
});
$(".login-button").click(function () {
    if ($("#tab-register").hasClass("tab-active")) {
        $("#tab-register").removeClass("tab-active");
        if($(".register-button p").hasClass("login-reg-text-active")){
            $(".register-button p").removeClass("login-reg-text-active");}
        $("#tab-register").hide();
        //$("#tab-register").toggle();
    }
    if($('#tab-register').hasClass('tab-active')) {
        $('#tab-login').hide();
    }
    $("#tab-login").show();
    $(".login-button p").addClass("login-reg-text-active");
    $("#tab-login").addClass("tab-active")
});
相关文章：