JQuery: Tabs - How do you know when a tab has been clicked?

Question

I'm using the JQuery Tabs.

I want to fire a function of mine when the user clicks on a particular tab.

How do I bind an event to each individual JQuery Tab when clicked?

Answer 1

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

If you want to add a different function to each tab, you can just give each anchor an onclick event.

<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

How about something like this:

$('#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;
        }   
    }
});

There might be a prettier solution but this should technically do what you need.

EDIT: This works perfectly fine if you are using static tabs. If you have the possiblity of dynamic tabs then use something like this:

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