JQuery: tabs. How do I know when a tab was clicked?

Question

I am using jQuery tabs .

I want to run a function when the user clicks on a specific tab.

How to associate an event with each individual jQuery tab when clicked?

Answer 1

Select an event: this event is fired when you click a tab.

If you want to add a different function to each tab, you can simply tell the onclick event to each anchor.

<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 that should technically do what you need.

EDIT: , . , - :

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