JQuery - responding to selected tab using tabselect

If you have a standard jquery UI tabs setup:

            <div id="tabs-project">

           <ul>

           <li><a href="#tabs-project-core">Details</a></li>

           <li><a href="#tabs-project-connections">Connections</a></li>

           <li><a href="#tabs-project-alerts">Alerts</a></li>

           </ul>

           <div id="tabs-project-core">

                   etc...             

            </div>

           </div>

And you want to determine which tab has been pressed by name (not index - because index might changed when code gets moved or if tabs get inserted..) then you can use:

 

        function getIndexOfTabAnchor(name) {

            return $("a[href*=#" + name + "]").parent().index();

        } 

        $("#tabs-project").tabs({

            select: function (event, ui) {

                if (ui.index == getIndexOfTabAnchor('tabs-project-jobs')) {

                    // do jobs stuff...

                }

                else if (ui.index == getIndexOfTabAnchor('tabs-project-schedules')) {

                    // do schedules stuff...

                }

            }

        });

Note that getIndexOfTabAnchor() uses http://api.jquery.com/attribute-contains-selector/