There doesn't seem to be an official solution for this problem. I've managed to roll one myself, which will work as long as you can assign a unique ID to each sub-tab.
The idea is basically that you don't actually need to tell the page which top tab to open, because it can be inferred from looking for the sub-tab that is being requested. So in your link, you would only need to reference the sub-tab, like so:
http://www.blah.com/tabs.aspx#profile
Before I get started, here's a live demo showing this in action: http://jsfiddle.net/CrAU7/
Let's say you have an html structure like so:
<div class="wrap">
<!-- the tabs -->
<ul class="tabs">
<li><a href="#big1">Tab 1</a></li>
<li><a href="#big2">Tab 2</a></li>
<li><a href="#big3">Tab 3</a></li>
</ul>
<!-- tab "panes" -->
<div class="pane" id="big1">
<p>#1</p>
<!-- the tabs -->
<ul class="tabs">
<li><a href="#big1small1">Tab 1</a></li>
<li><a href="#big1small2">Tab 2</a></li>
<li><a href="#big1small3">Tab 3</a></li>
</ul>
<!-- tab "panes" -->
<div class="pane" id="big1small1">Tab 1 - First tab content.</div>
<div class="pane" id="big1small2">Tab 1 - Second tab content</div>
<div class="pane" id="big1small3">Tab 1 - Third tab content</div>
</div>
<div class="pane" id="big2">
<p>#2</p>
<!-- the tabs -->
<ul class="tabs">
<li><a href="#big2small1">Tab 1</a></li>
<li><a href="#big2small2">Tab 2</a></li>
<li><a href="#big2small3">Tab 3</a></li>
</ul>
<!-- tab "panes" -->
<div class="pane" id="big2small1">Tab 2 - First tab content.</div>
<div class="pane" id="big2small2">Tab 2 - Second tab content</div>
<div class="pane" id="big2small3">Tab 2 - Third tab content</div>
</div>
<div class="pane" id="big3">
<p>#3 </p>
<!-- the tabs -->
<ul class="tabs">
<li><a href="#big3small1">Tab 1</a></li>
<li><a href="#big3small2">Tab 2</a></li>
<li><a href="#big3small3">Tab 3</a></li>
</ul>
<!-- tab "panes" -->
<div class="pane" id="big3small1">Tab 3 - First tab content.</div>
<div class="pane" id="big3small2">Tab 3 - Second tab content</div>
<div class="pane" id="big3small3">Tab 3 - Third tab content</div>
</div>
</div>
The important thing to note is that I've given tab pane a unique ID, and the tab's href is the same ID, prefixed with a hash. Then you'll need a function like this:
function TabByHash(hash) {
var $myTab = $(hash);
if ($myTab.size() != 0) {
//alert('hi!');
var $topTab = $myTab.parent().closest('.pane');
if ($topTab.size() != 0) {
$('a[href=#' + $topTab.attr('id') + ']').click();
}
$('a[href=#' + $myTab.attr('id') + ']').click();
}
}
On page load, you'll want to call the function with the hash part of the url: TabByHash(window.location.hash);
This then looks for a tab pane with the corresponding ID. If the pane is located within a parent pane, it first activates that parent pane, then activates the requested pane. Otherwise it simply activates the requested pane. Hopefully this will do the trick for you.
NOTE: Due to restrictions on the jsFiddle demo, I bound the TabByHash
function to anchor clicks, but in your situation, you will want to just call it on page load.