Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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> 
like image 945
Behseini Avatar asked Feb 18 '14 17:02

Behseini


People also ask

How do you active a tab?

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.


2 Answers

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

like image 92
Daniel Esponda Avatar answered Sep 28 '22 10:09

Daniel Esponda


Simple jQuery solution - find the <a> element where href="x" and click it:

$('a[href="#tabs-2"]').click(); 
like image 21
Denys Wessels Avatar answered Sep 28 '22 09:09

Denys Wessels