Question

我有两个标签：login＆amp;寄存器。这很简单，点击注册标签时隐藏登录部分，反之亦然。当我点击注册标签时，登录部分被隐藏并且它正常工作，但当我尝试再次点击登录选项卡时，一切都搞砸了。

这是代码：

<div class="nav">
    <a href="list.html">2014 peony&nbsp;list</a>
    <a href="bloom.html">bloom calendar</a>
    <a href="gallery.html">photo gallery</a>
    <a href="howto.html">peony<br />how-to's</a>
    <a href="tales.html">peony<br />tales</a>
    <a href="visit.html"> <br />visit</a>
    <span class="clearfix"><a href="contact.html">contact/ order</a></span>
</div>
<br />
<div class="notreally"><h1>peonies of the coos riviera</h1></div>
<span class="text">
    Just above the Connecticut River in New Hampshire's Coos County,
    more than a hundred varieties of herbaceous peonies, tree peonies,
    and intersectional-hybrid peonies bloom from late May to early July.
    <p>The display garden has closed for the season.  To order peonies for fall planting, 
        email <a href="mailto:peonies@criv.com">peonies@criv.com</a>, or phone 603.837.9800.</p>
    <p>Review <a href="now.html"><b>the 2014 bloom season</b></a> in pictures!</p>
</span>

Answer 1

我在这里创造了一个小提琴：

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

Answer 2

您忘记为“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")
});

jQuery两个标签

2 个答案: