We help IT Professionals succeed at work.

JQuery UI tabs Problem - Want to be able to select which tab to display on load

bigMlittleC
bigMlittleC asked
on
1,431 Views
Last Modified: 2012-05-06
Hi,

I am using the JQuery UI Tabs api to display nested tabs. I want to be able to choose which tab gets displayed when the page is loaded (included the inner/nested tabs - if exists). Currently it shows the first tab by default. My code is shown below.

As I am using PHP forms on several of the tabs (including the nested tabs) and so would like to be able to reload the page with the previous outer tab selected (and even the inner/nested tab if it has one?) rather than the first tab always being displayed by default .

Thanks
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
        <script src="js/ui.core.min.js" type="text/javascript"></script>
        <script src="js/ui.tabs.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function() {
                $('#tabContainer ul').tabs();
               //code below doesn't show tab 3 onload???
               var selected = $('.selector').tabs('option', 'selected');
                $('.selector').tabs('option', 'selected', 3);
                
            });
        </script>
 
<div id="tabContainer">
 <ul>
  <li><a href="#fragment-1"><span>TAB1</span></a></li>
  <li><a href="#fragment-2"><span>TAB2</span></a></li>
  <li><a href="#fragment-3"><span>TAB3</span></a></li>
 </ul>
 <div id="fragment-1">
  <ul class="innerNav" >
    <li><a href="#fragment-1a"><span>INNERTAB1</span></a></li>
    <li><a href="#fragment-1b"><span>INNERTAB2</span></a></li>
  </ul>
  <div id="fragment-1a" class="innerFragment"></div>
//php form here that i want to be able to come back to
  <div id="fragment-1b" class="innerFragment"></div>
  </div>
  <div id="fragment-2">
 </div>
  <div id="fragment-3">
 </div> 
</div>

Open in new window

Comment
Watch Question

Albert Van HalenAnalyst developer
CERTIFIED EXPERT

Commented:
Use this
$('#tabContainer ul').tabs({ selected: 3 });

Open in new window

Albert Van HalenAnalyst developer
CERTIFIED EXPERT

Commented:
The tabs are zero based indexed : the first tab is 0, the second = 1, etc.
So use this
$('#tabContainer ul').tabs({ selected: 2});

Open in new window

Author

Commented:
I have tried it with 0, 1, 2 and 3 and it doesn't change it.

Author

Commented:
sorry, misread your example, that does work for the outer tab, however I would like to be able to choose the nested tab also.

For example, Tab 1 selected and then nested tab 3 selected (it currently shows the first nested tab)
Albert Van HalenAnalyst developer
CERTIFIED EXPERT

Commented:
Ah, you have to change the selector without the UL:
$('#tabContainer').tabs({ selected: 2 });

Open in new window

Author

Commented:
That didn't work i am afraid. The outer tabs were displayed (although styling had been affected) then when you click on a nested tab they disappear. The parent tab is then unusable.

any thoughts?
Analyst developer
CERTIFIED EXPERT
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.