将点击事件绑定到当前活动的选项卡

Question

有没有办法将点击事件绑定到当前活动的选项卡？

目前，我正在通过 activate 事件捕获活动标签，并且可以获得活动标签的索引，但我不确定如何向活动标签添加点击事件。

Preferably the click event would unbind itself when the tab is no longer active.

有人有什么建议吗？

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

Answer 1

// Getter
var active = $( ".selector" ).tabs( "option", "active" );

http://api.jqueryui.com/tabs/#option-active - 文档。

if(active===true) {
    // bind click
} else {
    // unbind
}

Answer 2

为什么不直接将点击事件绑定到所有选项卡，然后在点击事件发生时检查点击了哪个选项卡？如果此时不需要单击（即，如果检测到不需要的选项卡单击），您可以简单地忽略单击。

请记住，jQuery-UI 选项卡是虚幻的——也就是说，它们并不像看起来那样真实存在。每个选项卡连接的div只是一个普通的div，每个选项卡div内的元素可以有正常的点击事件。假装选项卡不存在，并将选项卡 divs 视为正常 divs.

这是一个 jsFiddle 演示，展示了如何将所有 DIV 中的复选框元素（即所有选项卡上的复选框元素）绑定到同一个点击事件。举个例子：

jsFiddle Demo

HTML:

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab 1</a>
        </li>
        <li><a href="#tabs-2">Tab 2</a>
        </li>
        <li><a href="#tabs-3">Tab 3</a>
        </li>
    </ul>
    <div id="tabs-1">
        <p>Content for Tab 1</p>
        <label for="cb1">Car: </label><input type="checkbox" class="car" id="cb1" />
        <label for="cb1">Bus: </label><input type="checkbox" class="bus" id="cb2" />
    </div>
    <div id="tabs-2">
        <p>Content for Tab 2</p>
        <label for="cb3">Car: </label><input type="checkbox" class="car" id="cb3" />
        <label for="cb4">Bus: </label><input type="checkbox" class="bus" id="cb4" />
    </div>
    <div id="tabs-3">
        <p>Content for Tab 3</p>
        <label for="cb5">Car: </label><input type="checkbox" class="car" id="cb5" />
        <label for="cb6">Bus: </label><input type="checkbox" class="bus" id="cb6" />
    </div>
</div>
<div id="tabid"></div>

jQuery:

$("#tabs").tabs({
    activate: function (event, ui) {
        var active = $('#tabs').tabs('option', 'active');
        $("#tabid").html('the tab id is ' + $("#tabs ul>li a").eq(active).attr("href"));

    }
});
$('input:checkbox').click(function(){
    var cbClass = this.className;
    if ( $(this).is(':checked') ){
        $('.'+cbClass).prop('checked',true);
    }else{
        $('.'+cbClass).prop('checked',false);
    }
});

Answer 3

您可以收听 tabsbeforeactivate 活动。

这样做，您可以在更改之前捕获当前选项卡。

Example Here

$('#tabs').on('tabsbeforeactivate', function (event, ui) {
    console.log(ui.oldTab);
});

将点击事件绑定到当前活动的选项卡

Bind click event to currently active tab

jquery

jquery-ui

jquery-ui-tabs