在检查哪个选项卡处于活动状态之前,如何等待响应选项卡添加类?

时间:2017-01-24 17:13:26

标签: jquery onclick

我正在尝试这样做,当您点击导航栏上的不同标签时,如果您在标签1上,则按钮不会显示,但会在其他所有时间显示。我正在使用响应式标签(https://github.com/jellekralt/Responsive-Tabs)。

<nav id="header" class="navbar navbar-fixed-top">
            <div id="header-container" class="container navbar-container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a id="brand" class="navbar-brand" href="#">Project name</a>
                </div>
                <div id="navbar" class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#about">About</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </div><!-- /.nav-collapse -->
            </div><!-- /.container -->
        </nav><!-- /.navbar -->

以上代码仅在您第二次点击时有效。我意识到hasClass('active')仅在第二次单击选项卡1时才为真。它检查选项卡1是否在添加类之前使类处于活动状态。如何告诉它等到添加活动类以切换属性之后?响应标签正在添加“活动”类。

1 个答案:

答案 0 :(得分:0)

我通过将其包装在超时的检查功能中来修复它!

    $('.nav').click(function() {
        var check = function() {
            if($('#tab-1').hasClass('active'))
            {
                $('#register-now-button').attr('style', 'display:none');
            } else {
                $('#register-now-button').attr('style', 'display:flex');
            }
        }
        setTimeout(check, 200);
    });