JSFiddle - React, Tailwind, and code Playground

by queryj

HTML

<button>get current</button>
current tab: <span id="current"></span>

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">First</a></li>
        <li><a href="#tabs-2">Second</a></li>
        <li><a href="#tabs-3">Third</a></li>
    </ul>
    <div id="tabs-1">
        <p>Tab 1</p>
    </div>
    <div id="tabs-2">
        <p>Tab 2</p>
    </div>
    <div id="tabs-3">
        <p>Tab 3</p>
    </div>
</div>

JavaScript

var $tabs = $("#tabs").tabs({
    select: function( evt, ui ) {
        $("#current").text( $(ui.tab).attr('href'));
    }
})

$("button").click(function(){
    $("#current").text(getSelectedTabIndex());
});

function getSelectedTabIndex() { 
    $tabIndex =  $tabs.tabs('option', 'selected');
    var $selected = $("#tabs ul>li a").eq($tabIndex).attr('href');
    return $selected;
}