javascript - jQuery .hasClass() 选项卡更改失败

Question

我有这个 HTML 结构:

<div class="tab-pane slide-left padding-20" id="tab1">...</div>
<div class="tab-pane slide-left padding-20 active" id="tab2">...</div>
<div class="tab-pane slide-left padding-20" id="tab3">...</div>

当前事件选项卡将有 active 类，这就是为什么，我想创建条件函数来处理一些变量，当 tab2 使用此代码处于事件状态时:

<script>
    $(document).ready(function(){
        if ($("#tab2").hasClass("active")) {
            alert ("yes it's active!!");
        }
    });
</script>

但它不起作用。当 #tab2 处于事件状态时，不会显示任何警报消息。如何使这个工作？谢谢。

请注意:选项卡更改不会重新加载所有页面。

Answer 1

你可以做类似的事情。

$('.tab-pane').on('click', function () {
    if ($(this).hasClass("active")) {
        alert($(this).attr('id') + " it's active!!");
    }
});

DEMO

或者直接:

$('.tab-pane.active').on('click', function () {
    alert($(this).attr('id') + " it's active!!");
});

DEMO