JQueryUI tabs - switch to tab

Question

I'm not sure if this is possible at the moment, and testing done with testing seems to give odd results.

I have a section of 4 tabs on one page, inside these tabs there are several sections of text, each of which has a unique binding name.

What I'm trying to do is a link from another page to say the 4th block of content on tab 3 ...

all tabs work fine, and if I refer to sections of content on the first tab, it works fine .. its when I want to bind to tabs that are first, which becomes complicated.

I tried

<a href="http://example.com#tab-3#content-4" ></a> 

but it doesn't work at all

and when i use only

 <a href="http://example.com#tab-3"></a> 

I also saw that this is implemented - however, it seems to have the same functionality as using the above code, regardless of whether it is in my jquery call

 $(function(){ $('tabs').tabs(); var hash = location.hash; $('tabs').tabs( "select" , hash ); }); 

When choosing one of the two options above, when the third tab is selected, I reached the end of the page. I assume this is because all the tabs are put into list items, and then jqueryui turns them into tabs .. actually moving the contents of the tab for number 3 from bottom to top to the top of the tab section.

if anyone knows how I could link to the 4th block of content on the third tab, I would be extremely helpful.

someone, the solution may lie in $ _post and $ _get data .. but I'm not sure if this is true, and even then I'm not sure how to implement it using jqueryui

Thank you in advance

Answer 1

Try the following:

How to use a link

 <a href="http://example.com#content-4" ></a> 

And script

  $(function(){ $tabs = $('#tabs').tabs(); var hash = location.hash.substring(1), $anchor = $tabs .find('a[name="' + hash + '"]'), tabId = $anchor.closest('.ui-tabs-panel') .attr('id'); $tabs.find('ul:first a').each( function(i){ if($(this).attr('href') === '#' + tabId){ $tabs.tabs('select', i); window.scrollTo(0, $anchor.position().top); // Stop searching if we found it return false; } } ); }); 

Answer 2

Depending on which server-side scripting language you are using, if any, you can pass the tab you want to select in the url to $_GET[] it, then repeat it as the selected parameter in your tabs(); call tabs(); widget. Then, using the great function that I found in another thread in the stack, you can get the coordinates of the selected item and scroll to it.

eg. using php

 <!--- link on another page --> <a href="yourtabspage.php?tab=2&ctntid=content4">Your Link to Fourth Piece of Content in Second Tab</a> 

Then on the tabs page:

 <?php $your_tab = $_GET['tab']; $your_selected_element = $_GET['ctntid']; ?> <script type="text/javascript"> // this function is from another post on stackoverflow, I didn't write it. function getOffset( el ) { var _x = 0; var _y = 0; while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) { _x += el.offsetLeft - el.scrollLeft; _y += el.offsetTop - el.scrollTop; el = el.offsetParent; } return { top: _y, left: _x }; } jQuery(document).ready(function () { $("#tabs").tabs({ selected: "<?php echo $your_tab; ?>" }); }); jQuery(window).load(function() { var x = getOffset( document.getElementById('<?php echo $your_selected_element;?>') ).left; var y = getOffset( document.getElementById('<?php echo $your_selected_element;?>') ).top; window.scrollTo(x,y) }); </script> 

Answer 3

Old question, but I came across this deep jQuery tab today. I also had to save the hash on the post-back. The below works for deep binding to jQuery tabs AND save the hash on the back side by adding a hash to the form action.

  $(document).ready(function ($) { //Initialize the jQuery tabs $("#tabs").tabs({ activate: function (event, ui) { //Add this ID to the URL, and scroll back to the top location.hash = ui.newPanel.attr('id'); window.scrollTo(0, 0); //Update the form to append the hash to the action, for post-backs var newAction = $("#frmMain").attr("action").split('#')[0] + location.hash; $("#frmMain").attr("action", newAction); } }); //When the page loads, if we have a hash, load that tab var hash = location.hash; if (hash.length > 0) { //Load the tab associated with this hash $("#tabs").tabs("load", hash); //Re-update the form to append the hash to the action, for post-backs var newAction = $("#frmMain").attr("action").split('#')[0] + hash; $("#frmMain").attr("action", newAction); } }); 

Answer 4

try

 <a href="#" onclick="changetab(3)">Tab 4</a> function changetab(idx) { $('tabs').tabs( "select" , idx); }