Jquery hiding/unhiding div 的功能无法正常工作

Question

我有两种形式。 signin/signup 和 hospital/doctor 取景器。两者都是扁平 UI 形式

第一个表格包含 3 个链接

登录
报名
重设密码

问题是当我单击上述链接之一时，下面列出的 hospital/doctor 查找器表单变为空白，反之亦然。

这是表单内 hiding/unhiding div 的 jquery 函数。该功能很明确，但我无法弄清楚为什么它不起作用。

$(function () {
    // constants
    var SHOW_CLASS = 'show',
        HIDE_CLASS = 'hide',
        ACTIVE_CLASS = 'active';

    $('#tabs1').on('click', 'li a', function (e) {
        e.preventDefault();
        var $tab = $(this),
             href = $tab.attr('href');

        $('.active').removeClass(ACTIVE_CLASS);
        $tab.addClass(ACTIVE_CLASS);

        $('.show')
           .removeClass(SHOW_CLASS)
           .addClass(HIDE_CLASS)
           .hide();

        $(href)
          .removeClass(HIDE_CLASS)
          .addClass(SHOW_CLASS)
          .hide()
        .fadeIn(550);
    });
});

$(function () {
    // constants
    var SHOW_CLASS = 'show',
        HIDE_CLASS = 'hide',
        ACTIVE_CLASS = 'active';

    $('#tabs2').on('click', 'li a', function (e) {
        e.preventDefault();
        var $tab = $(this),
             href = $tab.attr('href');

        $('.active').removeClass(ACTIVE_CLASS);
        $tab.addClass(ACTIVE_CLASS);

        $('.show')
           .removeClass(SHOW_CLASS)
           .addClass(HIDE_CLASS)
           .hide();

        $(href)
          .removeClass(HIDE_CLASS)
          .addClass(SHOW_CLASS)
          .hide()
        .fadeIn(550);
    });
});

Answer 1

您正在定位所有活跃的 class，您必须使用 this，或者更具体地选择您的 class

Answer 2

当您引用 $('.active') 和 $('.show') 时，您会访问 它们的每个实例 而不管它们 "tab" 在什么上。没有看到 HTML 我不能确定，但你可以像这样过滤到特定的 "tab"：

 $tab.find('.show')
       .removeClass(SHOW_CLASS)
       .addClass(HIDE_CLASS)
       .hide();

Jquery hiding/unhiding div 的功能无法正常工作

Jquery function for hiding/unhiding div isn't working properly

asp.net

jquery

visual-studio