Behseini Behseini - 4 months ago 20
Javascript Question

How to Set Active Tab in jQuery Ui

Can you please let me know how I can set the active tab in jquery ui with a button click out of the tabs?

I have a button like:

<input id="action" type="submit" value="Go to Action">


and here is the code,

<script>
$(function() {
$( "#tabs" ).tabs();
$( "#action" ).on("click", function(){});
});




<div id="tabs">
<ul>
<li><a href="#tabs-1">Description</a></li>
<li><a href="#tabs-2">Action</a></li>
<li><a href="#tabs-3">Resources</a></li>
<li><a href="#tabs-4">Settings</a></li>
</ul>

<div id="tabs-1">
<p>Description content</p>
</div>

<div id="tabs-2">
<p>Action content</p>
</div>

<div id="tabs-3">
<p>Resources content</p>
</div>

<div id="tabs-4">
<p>Settings </p>
</div>

</div>

Answer

Inside your function for the click action use

$( "#tabs" ).tabs({ active: # });

Where # is replaced by the tab index you want to select.

Edit: change from selected to active, selected is deprecated

Comments