JQuery Tabs and jump links

[stuck]

Hi - I have a link on my page which when clicked i would like it to jump to a section on the same page but thats sits inside a tab.

Now, currently this only works if the tab which contains the id is already open - using a href="#description" as the source, and <h2 id="description"> as the destination.

 

How do i get round this issue?

Its almost as tho the browser thinks that if the content is not visible then it doesn't exist...

[pnmorrison]

U can't open tabbed content from a jumplink.

Only the tabs themselves can do this.

There may be some snippet of js which may work but i have never come across any.

[falkencreative]

U can't open tabbed content from a jumplink.

You can -- I've done it.

 

I'll see if I can dig up any code I've used in the past... It involves using a link with an anchor it it (example.com/file.html#anchor) and using javascript to get the anchor using window.location.hash on page load and opening up the correct tab.

 

In order for us to best help you with this issue, it might be helpful if you post a link to your website so we can see the code you are working with.

[stuck]

havent got a url as im just experimenting at the moment but this is the sample code:

 

<script type="text/javascript" src="/js/jquery/ui/ui.core.js"></script>

<script type="text/javascript" src="/js/jquery/ui/ui.tabs.js"></script>

<script type="text/javascript">

<!--

$(function() {

$('#tab-container').tabs();

});

-->

</script>

 

 

<a href="#two">Click Here...</a>

 

<div id="tab-container">

<ul class="tabs">

<li><a href="#one"><span>One</span></a></li>

<li><a href="#two"><span>Two</span></a></li>

<li><a href="#three"><span>Three</span></a></li>

</ul>

 

<div id="one">

....

</div>

 

<div id="two">

<h2 id="description">Description</h2>

</div>

 

<div id="three">

....

</div>

 

</div>

[pnmorrison]

think windows.location.hash brings all sorts of issues with it tho.

[stuck]

what sort of issues?

I'm looking for some answers on the jquery site but so far not been able to find anything.

If someone knows of a solution pls help me - many thanks.

[stuck]

anyone? please??

[falkencreative]

Just a quick question... do you have to use this particular tab script? Could you use something else non-jQuery UI based? I know there are a lot of scripts out there that should support the functionality you are looking for.

[falkencreative]

Actually, it looks like the tabs script you are using has the correct functionality in place.

 

...select a tab from a text link instead of clicking a tab itself

 

var $tabs = $('#example').tabs(); // first tab selected

 

$('#my-text-link').click(function() { // bind click event to link

$tabs.tabs('select', 2); // switch to third tab

return false;

});

 

http://jqueryui.com/demos/tabs/#...select_a_tab_from_a_text_link_instead_of_clicking_a_tab_itself

[stuck]

Excellent. Nice one Falcon. Really appreciate this. Works a treat.