Find the selected tab index/name

Question

I know how to detect when user switches from tab to tab:

$(function() {
            $("#tabs").tabs({
                activate: function(event,ui) {
                     alert('selected: '+ui.newTab);

                  }
            });

Problem is that I don't know how to get an identifier for this tab, so to know which tab it is...the newTab object is a jquery object and has a lot of properties but I can't find one suitable to my needs. Also...wouldn't it possible to define my own ids for each tab? edit: This is my html:

div id="tabs" class="centered">
                <ul>
                    <li><a href="tab1.html">Tab1</a></li>
                    <li><a href="tab2.html">Tab2</a></li>

                </ul>
            </div>

Answer 1

You can just call .index() on ui.newTab

$(function () {
    $("#tabs").tabs({
        activate: function (event, ui) {
            alert(ui.newTab.index());
        }
    });
});

http://jsfiddle.net/4SMh3/

Answer 2

Use the active option:

var numberOfSelectedTab = $("#tabs").tabs("option", "active");

https://api.jqueryui.com/tabs/#option-active