jQuery：选项卡-如何知道何时单击选项卡？

Question

我正在使用JQuery Tabs 。

当用户单击特定选项卡时，我想触发我的功能。

单击时如何将事件绑定到每个单独的JQuery选项卡？

Answer 1

选择事件：单击选项卡时触发此事件。

如果要向每个选项卡添加不同的功能，则只需给每个锚点一个onclick事件。

<ul>
    <li><a href="#tabs-1" onclick="function1();">Nunc tincidunt</a></li>
    <li><a href="#tabs-2" onclick="function2();">Proin dolor</a></li>
    <li><a href="#tabs-3" onclick="function3();">Aenean lacinia</a></li>
</ul>
....

<script type="text/javascript">

    $(document).ready(function(){
        $( ".selector" ).tabs();
    });

    function function1(){
        // your code here
    }

    function function2(){
        // your code here
    }

    function function3(){
        // your code here
    }
</script

Answer 2

这样的事情怎么样：

$('#example').tabs({
    select: function(event, ui) {
        var $tabs = $('#example').tabs();

        // Gets the currently selected tab.
        var selected = $tabs.tabs('option', 'selected');

        // Run a switch on that selected tab and do what you need depending
        // on which tab was selected.
        switch(selected){
            case 0:
              break;
            case 1:
              break;
            case 2:
              break;
            case 3:
              break;
        }   
    }
});

可能有一个更漂亮的解决方案，但这在技术上应该可以满足您的需求。

编辑：如果您使用静态选项卡，这工作得很好。 如果您可以使用动态标签，请使用如下所示的内容：

$("#tabID").click(function(){
    do something here...;
});