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>
Ctrl + T = Open a new tab. Ctrl + Shift + T = Open a closed tab. Ctrl + F4 = Close the active tab. See our tabbed browsing definition for further tips and information about tabs in browsers.
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
Simple jQuery solution - find the <a>
element where href="x"
and click it:
$('a[href="#tabs-2"]').click();
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With