Question

有没有办法将点击事件绑定到当前活动的标签？

目前，我正在通过activate事件捕获活动标签，我可以获取活动标签的索引，但我不确定如何将单击事件添加到活动标签。

当标签不再有效时，点击事件最好解除绑定。

有人会有任何建议吗？

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

Answer 1

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

请记住，jQuery-UI标签是虚幻的 - 也就是说，它们在出现时并不存在。连接到每个选项卡的div只是一个普通的div，每个tab div中的元素可以有正常的点击事件。假设标签不存在，并将标签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);
    }
});

Answer 2

您可以收听tabsbeforeactivate事件。

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

Example Here

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

Answer 3

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

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

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

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

3 个答案: