CODEWITHSUNDEEP
javascriptjqueryjquery-uitabsclick
triplethreat77
triplethreat77

Reputation: 1296

Programmatically change selected jQuery UI tabs?

So I have a page where I'm just using the stylized part of the tabs. Clicking on a tab will take you to a new page with that tab active, so almost emulating what they should do but not having 4 large pages within one. For each page, I change the active tab by

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

and so on. This works fine. Now for the dialog. I have a dialog on this page that also initiates tabs. Since there is information that is nested within many divs, the default functionality for 'tabs' will not work. From what I understand, when you click a tab it looks for the next div. 3 tabs = only 3 divs. So in this case, I am just using tabs for stylizing again and just show/hiding the information needed for each different tab (3 tabs total) and unbinding the click.

$('.tabsDialog > ul > li > a').unbind('click');

So, naturally my thought is with the click function to hide the previous div and show the new one would be to activate this new tab. So something like this

         $('a.globalSet').on('click',function(){
              $('div.timeSet').hide();
              $('div.globalSet').fadeIn();
              $('div.comManager').hide();
              $( "li.timeSet" ).tabs({ active:1 });
          });

and this is not activating my new tab. I've tried addClass .ui-tabs-active and still no luck. Any ideas? Thanks in advance. jsfiddle: http://jsfiddle.net/tRKSv/2/

Upvotes: 0

Views: 4067

Answers (1)

Raúl Juárez
Raúl Juárez

Reputation: 2159

Tabs widget, doesn't work exactly as you say, I doesn't look for the "next" div, it looks for a div with the same id you put in href attribute of the a tag in your html (or if it isn't an anchor, a page to load the content from).

So, to make your code work, just put proper href attributes in your a tags. Here is just an example for the dialog, but you should mirror this code for both tabs:

<div id="dialog" title="Basic dialog">
   <div id="dialogTabs">
     <ul>
       <li><a href="#info1">dialog info 1</a></li><!-- 'a' tags with proper href -->
       <li><a href="#info2">dialog info 2</a></li>
       <li><a href="#comManager">dialog info 3</a></li>
       <li><a href="someOtherPage.html">dialog info 3</a></li><!-- ajax loaded content -->
     </ul>
     <div id='info1' class='info1'> <!-- div with corresponding 'id' attribute -->
        <!- More content here ->
     </div>
     <div id='info2' class='info1'>
        <!- More content here ->
     </div>  
     <div id='comManager' class='comManager'>
        <!- More content here ->
     </div>
   </div>
</div>

Here is a fiddle: http://jsfiddle.net/rf90210/tRKSv/3/

Upvotes: 1

Related Questions