Jump to content

JQuery Tabs and jump links


stuck

Recommended Posts

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...

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...