Hello,

I hope someone will be able to help!

I have JQuery UI Tabs installed and working, but what I am trying to achieve is to have a link on a different page select / display a specific tab. 

I have tried the direct link #tabs-1 and #tabs-2 and this works fine yet it anchors to where the tabs start on the page but what I am trying to achieve is to have the tab selected but the page still load at the top as there is content there that is still relevant to the tab itself.

I have tried to implement the solution "…select_a_tab_from_a_text_link_instead_of_clicking_a_tab_itself" from the demos and documentation section but have yet to get it to work since I am not very good at scripting!

The working code I have and the moment is: -

2. <script type="text/javascript">
3. $(function(){
5. // Tabs
6. $('#tabs').tabs();
8. //hover states on the static widgets
9. $('#dialog_link, ul#icons li').hover(
10. function() { $(this).addClass('ui-state-hover'); }, 
11. function() { $(this).removeClass('ui-state-hover'); }
12. );
14. });
15. 
    
16. </script>
17. 
    
19. <div id="tabs">
20. <ul>
21. <li><a href="#tabs-1">xxx</a></li>
22. <li><a href="#tabs-2">yyy</a></li>
23. <li><a href="#tabs-3">zzz</a></li>
24. </ul>
25. <div id="tabs-1">xxx</div>
26.                         <div id="tabs-2">yyy</div>
27.                         <div id="tabs-3">zzz</div>
28. </div>

I would be grateful if someone could advise if what I am trying to do is possible i.e. link to and select a tab but have the page load and the top, and if so how I could integrate that into my existing script so that I do not loose the hover functionality etc.

Many thanks

IcedGoblin