代码清理：

Question

我目前正在构建一个包含2个超链接的菜单，＆＃34;登录＆＃34;和＃34;注册＆＃34;。我的目标是让这个菜单工作，当点击任何超链接时，下面会显示相应的div。例如，用户点击＆＃34;注册＆＃34;，然后点击＆＃34;注册＆＃34;表格如下。我对这些<div>出现没有任何问题，我制作了一个使用.slideToggle()功能的功能正常的脚本。在我进一步讨论之前，请在屏幕尺寸为1400px或更高的设备上查看我的网站，然后点击＆＃34;注册＆＃34;和＆＃34;登录＆＃34;超链接。（http://www.codesrce.com）

如果您注意到点击＆＃34;注册＆＃34;或者＆＃34;登录＆＃34;，对于每个文本的第一次单击变为绿色，然后当您单击另一个时，它将恢复为白色，并且您最近点击的文本变为绿色。问题是，我正在寻找的是不起作用。它工作了很短的时间，然后当你点击它们超过3次时搞砸了。这是我的问题：

如何让这个菜单以“＃34;注册＆＃34;或＆＃34;登录＆＃34;单击它，它会更改字体颜色，但是当再次单击相同的链接或另一个链接被单击时，它将恢复为原始颜色，将新单击的链接保留为新的文本颜色，直到再次单击或单击其他链接？我希望我有意义。到目前为止，我将提供我的代码，希望有人可以帮助我！

基本上，如果一个超链接处于活动状态并带有浅绿色，则另一个超链接应该是非活动的白色字体颜色，如果两个都没有活动，则两者都是白色。

颜色

绿色：#4AE6AB

怀特:(显然）#fff或white

的代码

HTML：

<div id="BottomTop">
   <div id="UserMenuBar">
      <a class="ToggleSignInForm">Sign In</a><a class="ToggleSignUpForm">Sign Up</a>
   </div>
</div>
<div class="SignInFormToggled" id="SignInForm">
   <form id="signinform" onsubmit="return false;">
   </form>
</div>
<div class="SignUpFormToggled" id="SignUpForm">
   <form name="signupform" id="signupform" onsubmit="return false;">
   </form>
</div>

CSS：

#SignInForm {
    background: rgb(154,234,204);
    height: 120px;
}

#SignUpForm {
    background: rgb(154,234,204);
    height: 120px;
}

.SignInFormToggled {
    display: none;
}

.SignUpFormToggled {
    display: none;
}

.ForgotPasswordFormToggled {
    display: none;
}

#BottomTop {
    background: #333333;
    height: 40px;
    width: 100%;
    margin: 0px;
}

#UserMenuBar {
    background: #333333;
    /* Old browsers */
    height: 40px;
    width: 1400px;
    margin-left: auto;
    margin-right: auto;
    line-height: 40px;
    font-family: 'Gotham Rounded Book', Myraid Pro, Segoe UI, Helvetica Neue, Arial;
}

#UserMenuBar a {
    padding-top: 30px;
    padding-right: 20px;
    color: #fff;
    font-size: 16px;
    -webkit-transition: color 0.3s ease;
    -moz-transition: color 0.3s ease;
    -ms-transition: color 0.3s ease;
    transition: color 0.3s ease;
}

#UserMenuBar a:hover {
    color: #4AE6AB;
    cursor: pointer;
}

#UserMenuBar a.active {
    color: #4AE6AB;
}

#UserMenuBar a.notactive {
    color: #fff;
}

#SignInFormContainer {
    width: 1400px;
    height: 120px;
    margin-left: auto;
    margin-right: auto;
}

#SignUpFormContainer {
    width: 1400px;
    height: 120px;
    margin-left: auto;
    margin-right: auto;
}

JS：

$(function () {
    $('.ToggleSignInForm').click(function () {
        $('.SignInFormToggled').slideToggle();
        $('.SignUpFormToggled').css("display", "none");
        $(this).toggleClass('active');
        if ($('.ToggleSignUpForm').hasClass('active')) {
            $('.ToggleSignUpForm').toggleClass('notactive');
        } else {}
    });
});

$(function () {
    $('.ToggleSignUpForm').click(function () {
        $('.SignUpFormToggled').slideToggle();
        $('.SignInFormToggled').css("display", "none");
        $(this).toggleClass('active');
        if ($('.ToggleSignInForm').hasClass('active')) {
            $('.ToggleSignInForm').toggleClass('notactive');
        } else {}
    });
});

$(function () {
    $('.ToggleForgotPasswordForm').click(function () {
        $('.ForgotPasswordFormToggled').slideToggle();

    });
});

Answer 1

代码清理：

您的div不匹配。对于div，您有比结束标记更多的结束标记。

另外，如果else语句为空，则可以删除它。如果不需要，您不必拥有else声明。

您有三个DOM document.ready函数，但您只需要一个。

的解决方案：

变化：

$('.ToggleSignUpForm').toggleClass('notactive');

要：

$('.ToggleSignInForm').toggleClass('notactive'); $('.ToggleSignInForm').toggleClass('active');

的更新

添加：

$('.active').removeClass('active');

在：

$(this).toggleClass('active');

<强> JSFiddle Demo

Answer 2

问题在于课程。在css中，最后列出的类会覆盖所涉及元素的所有先前类。单击几次后，notactive类最后会结束并覆盖active类。要解决此问题，只需在切换active类时切换notactive类。这样可以确保在任何给定时间只实现其中一个类，并解决问题。

JS将如下所示：

$(function () {
    $('.ToggleSignInForm').click(function () {
        $('.SignInFormToggled').slideToggle();
        $('.SignUpFormToggled').css("display", "none");
        $(this).toggleClass('active');
        if ($('.ToggleSignUpForm').hasClass('active')) {
            $('.ToggleSignUpForm').removeClass('active').addClass('notactive');
        } else {}
        $('.active').removeClass('active');
    });
});

$(function () {
    $('.ToggleSignUpForm').click(function () {
        $('.SignUpFormToggled').slideToggle();
        $('.SignInFormToggled').css("display", "none");
        $(this).toggleClass('active');
        if ($('.ToggleSignInForm').hasClass('active')) {
            $('.ToggleSignInForm').removeClass('active').addClass('notactive');
        } else {}
        $('.active').removeClass('active');
    });
});

Answer 3

我找到了答案。有时Javascript很奇怪，但是这段代码很有效！

感谢@imbondbaby和其他人带领我朝着正确的方向前进。

JS：

$(function () {
$('.ToggleSignInForm').click(function () {
    $('.SignInFormToggled').slideToggle();
    $('.SignUpFormToggled').css("display", "none");
    $(this).toggleClass('active');
    if ($('.ToggleSignUpForm').hasClass('active')) {
        $('.ToggleSignUpForm').toggleClass('notactive');
        $('.ToggleSignUpForm').toggleClass('active');
    }
    if ($('.ToggleSignUpForm').hasClass('notactive')) {
        $('.ToggleSignUpForm').toggleClass('active');
    }

    if ($('.ToggleSignUpForm').hasClass('notactive')) {
        $('.ToggleSignUpForm').toggleClass('active');
        $('.ToggleSignUpForm').toggleClass('notactive');
    }
   if ($('.ToggleSignUpForm').hasClass('active')) {
        $('.ToggleSignUpForm').toggleClass('notactive');
    }
});
$('.ToggleSignUpForm').click(function () {
    $('.SignUpFormToggled').slideToggle();
    $('.SignInFormToggled').css("display", "none");
    $(this).toggleClass('active');
    if ($('.ToggleSignInForm').hasClass('active')) {
        $('.ToggleSignInForm').toggleClass('notactive');
        $('.ToggleSignInForm').toggleClass('active');
    }
    if ($('.ToggleSignInForm').hasClass('notactive')) {
        $('.ToggleSignInForm').toggleClass('active');
    }

    if ($('.ToggleSignInForm').hasClass('notactive')) {
        $('.ToggleSignInForm').toggleClass('active');
        $('.ToggleSignInForm').toggleClass('notactive');
    }
    if ($('.ToggleSignInForm').hasClass('active')) {
        $('.ToggleSignInForm').toggleClass('notactive');
    }
});

});

<强> FIDDLE

如何让我的.toggleClass（）菜单正常工作？

颜色

的代码

3 个答案:

代码清理：

的解决方案：

的更新