Question

我正在使用JQuery Tabs。

我想在用户点击特定标签时触发我的功能。

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

Answer 1

Select event: This event is triggered when clicking a tab.

如果您想为每个标签添加不同的功能，您可以为每个主持人提供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...;
});

JQuery：标签 - 你怎么知道单击标签的时间？

2 个答案: