UI jQuery Tabs - Create More than One Link to Tabs within Tabs on Same Page - hyperlink

Question

My code so far:
$(function(){
$( "#tabs" ).tabs().find( ".ui-tabs-nav" ).sortable({ axis: "x" });
$(document).ready(function() {
var $tabs = $("#tabs").tabs();
$('#tabs-1 a').click( function(){
$tabs.tabs('select', 4); });
});
<div id="tabs">
<ul>
<li>Home</li>
<li>Alarms</li>
<li>Access Control</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
<div id="tabs-1">
<p><span class="bodytext">Check our services</span></p> //want to link to tab 4(services)
<p><span class="bodytext">
Contact usfor free 24hours a day...</span></p>
As you can see from the code when you click on "Contact us" text in tab 1 there is a link to tab 5.
What i want to do is to create a link from "Check our services" to tab 4.
In general to create over 10 links withing tabs linking other tabs
I think i know that i have to change $tabs.tabs('select', 4); to $tabs.tabs('select', id); but i dont know how to call the "id" in html when i want to create my link.
Any suggestions?

Answer 1

I think I would handle this differently using the href on the link itself, perhaps with a class to indicate that it is an intra-tab link, to determine which tab to load and setting up the handlers in the tabs create event.
$('#tabs').tabs({
create: function(event,ui) {
$('a.intra-tab',ui.panel).unbind('click').click( function() {
var id = Number( $(this).attr('href').replace(/#tabs-/,'') ) - 1;
$('#tabs').tabs('select',id);
return false;
});
}
});
<div id="tabs">
<ul>
<li>Home</li>
<li>Alarms</li>
<li>Access Control</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
<div id="tabs-1">
<p><span class="bodytext">Check our services</span></p>
</div>
...
You could also do it using live handlers.
$('#tabs').tabs();
$('a.intra-tab').live( 'click', function() {
var id = Number( $(this).attr('href').replace(/#tabs-/,'') ) - 1;
$('#tabs').tabs('select',id);
return false;
});