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

Answer 2

如果您使用的是Jquery UI，则可以尝试使用

var active = $（“。selector”）。tabs（“option”，“active”）;

如果您想根据

进行圆顶动作，此功能将起作用

$('.selector').tabs({
                    activate: function(event ,ui){
                        //console.log(event);
                        console.log(ui.newTab.index());
                    }
});

jQuery .hasClass（）无法更改选项卡

2 个答案: