I need to be able to link to a specific tab from a menu that is present on all the pages. This means that the link has to activate a particular tab while on the same page (this is important, I can get it to work from another page). In the current version of jquery UI, I can link from another page directly to the tab, no problems. But not the same thing happens if the link is on the same page with the tab I am trying to access. 

I have 2 questions:

1. there something I can do to make the link-to-tab on the same page behave like the link-to-tab from another page? This would be the ideal scenario. To clarify - this works just putting href="url/#tab-id" without anything else.

2. is there another solution linking by referring to the ID of the tab (or some other parameter I can put in)? I can get this to work using the position of the tab, but alas, the system I have to build has to be agnostic to the tab's position, as it will be re-used in different pages and different configurations.

This is what I have so far ( you can also see it in action here) 

2.   <script>
3. /*link-to-tab from external page */
4.   $(function() {
5.     $('#tabs').tabs({
6.     select: function(event, ui) {
7.         window.location.hash = ui.tab.hash;
8.     }
9. });
10.   });
11. 
    
12. /*link-to-tab by using it's position */
13.           jQuery(document).ready(function($){
14. $('#link-1').click(function(){
15. $('#tabs').tabs( 'option', 'active', 0 ); // Selects the first tab
16. });$('#link-2').click(function(){
17. $('#tabs').tabs( 'option', 'active', 1 ); // Selects the first tab
18. });$('#link-3').click(function(){
19. $('#tabs').tabs( 'option', 'active', 2 ); // Selects the first tab
20. });
21. });
22. </script>

The HTML

2. <h2>These SHOULD link to tab ID </h2>
3. <p>They are the same as on the <a href="/tabs/links.html">links.html</a> page, same code, etc. THey don't work :(</p>
4. <a href="#tabs-1">Tab 1</a><br />
5. <a href="http://agileprojects.ro/tabs/tabs.html#tabs-2">Tab 2</a><br />
6. <a href="#tabs-3">Tab 3</a><br />
7. <br /><br /><br />
8. 
   
9. <h2>These link to tab position </h2>
10. <p>aka, they activate tab 1, tab 2, tab 3, etc. </p>
11. <a href="#tabs-1" id="link-1">Tab 1</a><br />
12. <a href="#tabs-2" id="link-2">Tab 2</a><br />
13. <a href="#tabs-3" id="link-3">Tab 3</a><br />
14. 
    
15. <div id="tabs">
16.   <ul>
17.     <li><a href="#tabs-1">Tab 1</a></li>
18.     <li><a href="#tabs-2">Tab 2</a></li>
19.     <li><a href="#tabs-3">Tab 3</a></li>
20.   </ul>
21.   <div id="tabs-1">
22.     <p>some test some test</p>
23.   </div>
24.   <div id="tabs-2">
25.     <p>some test some test</p>
26.   </div>
27.   <div id="tabs-3">
28.     <p>some test some test</p>
29.     <p>some test some test</p>
30.   </div>
31. </div>