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

【问题标题】：Bind click event to currently active tab将点击事件绑定到当前活动的选项卡
【发布时间】：2015-03-05 14:47:45
【问题描述】：

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

目前，我正在通过activate 事件捕获活动选项卡，我可以获得活动选项卡的索引，但我不确定如何将点击事件添加到活动选项卡。

当标签不再处于活动状态时，点击事件最好自行解除绑定。

有人有什么建议吗？

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

【问题讨论】：

标签： jquery jquery-ui jquery-ui-tabs

【解决方案1】：

您可以收听tabsbeforeactivate 事件。

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

Example Here

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

【讨论】：

我不得不稍微改变你的方法，这意味着将tabsbeforeactive 更改为tabsactivate。但它最终奏效了！干杯！

【解决方案2】：

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

请记住，jQuery-UI 选项卡是虚幻的——也就是说，它们并不像它们出现的那样真实存在。每个tab所连接的div只是一个普通的div，每个tab div内的元素都可以有正常的点击事件。假装tab不存在，把tab div当作普通div。

这是一个 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);
    }
});

【讨论】：

【解决方案3】：

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

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

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

【讨论】：