Hi,
I want to send an alert to the user indicating the title of the tab
they have clicked. This is easy enough in principle using
$('#tabs').bind('tabsselect', function(event, ui)
{ alert( 'ui.tab.textContent: ' + ui.tab.textContent ); });
But I also have a set of tabs within the first tab that I require to
pass the title of the tab when selected...(taken care of above) BUT I
need to add the title of the 'parent' tab too!
The HTML is below, note the 'inner' tabs have dynamic IDs and the 2nd
to last integer is always the tab id number that it relates to (in the
example below, tabs-5 is clicked first the user should recieve "Tab 5
text", then when tabVertical-928033-6-5-1 is selected the user should
receive "Tab 5 text, inner tab 1"
Any help/pointers would be excellent - thanks in advance!
<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-
all">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-
header ui-corner-all">
<li class="ui-corner-top ui-tabs-selected ui-state-active">
<a href="#tabs-5">Tab 5 text</a>
</li>
</ul>
<div id="tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-
bottom ui-tabs-hide"></div>
.
.
<div id="tabs-5" class="ui-tabs-panel ui-widget-content ui-corner-
bottom">
<div id="tabVertical-928033-6-5-1" class="ui-tabs ui-widget ui-
widget-content ui-corner-all ui-tabs-vertical ui-helper-clearfix">
<ul class="ui-tabs-nav ui-helper-reset
ui-helper-clearfix ui-widget-
header ui-corner-all">
<li class="ui-tabVcontent-nav-item
ui-state-default">
<a
href="#tabVcontent-928033-6-5-1">inner tab 1</a>
</li>
.
.
<li class="ui-tabVcontent-nav-item
ui-state-default ui-tabs-
selected ui-state-active"></li>
</ul>
<div id="tabVcontent-928033-6-5-1" class="ui-tabs-panel
ui-widget-
content ui-corner-bottom ui-tabs-hide" style="">
<p>Content here Content here Content here
Content here Content
here Content here </p>
</div>
.
.
<div id="tabVcontent-928341-6-5-5" class="ui-tabs-panel
ui-widget-
content ui-corner-bottom ui-tabs-hide"></div>
</div>
</div>
</div>
