Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1413
  • Last Modified:

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

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

0
bigMlittleC
Asked:
bigMlittleC
  • 4
  • 3
1 Solution
 
Albert Van HalenAnalyst developerCommented:
Use this
$('#tabContainer ul').tabs({ selected: 3 });

Open in new window

0
 
Albert Van HalenAnalyst developerCommented:
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

0
 
bigMlittleCAuthor Commented:
I have tried it with 0, 1, 2 and 3 and it doesn't change it.
0
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
bigMlittleCAuthor 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)
0
 
Albert Van HalenAnalyst developerCommented:
Ah, you have to change the selector without the UL:
$('#tabContainer').tabs({ selected: 2 });

Open in new window

0
 
bigMlittleCAuthor 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?
0
 
Albert Van HalenAnalyst developerCommented:
I created a testpage for you.
Just open it in the browser.

What it does :
It creates the tabs and selects the third tab by default.
It also creates the tabs within the content of first tab and the second tab is selected by default.

NB To create tabs in this kind of structure, the selector is the div; not the unnumbered list.
If you applied style in that manner you got it wrong.

Have a look at the jquery ui demo page : http://jqueryui.com/demos/tabs/

Good luck!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/ui-lightness/jquery-ui.css" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(function() {
			$('#tabContainer').tabs({ selected: 2 });
			$('#fragment-1').tabs({ selected: 1 });
		});
	</script>
</head>
<body> 
	<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">Content of inner tab 1</div>
			<div id="fragment-1b" class="innerFragment">Content of inner tab 2</div>
		</div>
		<div id="fragment-2"></div>
		<div id="fragment-3"></div> 
	</div>
</body>
</html>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now