Select an anchor within a JQUERY Tab from a link on anther webpage

Question

i'm a complete novice at JQuery and Javascript, and was hoping you could help me out with my problem.

I'm using JQuery 1.7.2 and JQuery-ui 1.10.3 Tabs.

From an external url, i want to be able to link to an anchor located within a JQuery tab, however the tab name itself is also an anchor.

I know how to activate the tab the anchor is located in

e.g. http://mysite.com/#tab-1

but where do i go from there?

How do I specify the anchor I want to link to located in tab-1 from a url?

e.g. http://mysite.com/#tab-1#myanchor

Here's the HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="/css/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css" media="all"/>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() 
  {var tabs = $( "#tabs" ).tabs(); 
   tabs.find( ".ui-tabs-nav" ).sortable(
     {axis: "x",
      stop: function() 
        {tabs.tabs( "refresh" );
        }
     }
    );
  }
);
</script> 
</head>

<body>
  <div id="tabs">
    <ul>
      <li><a href="#tab-1">1st Tab</a></li>
      <li><a href="#tab-2">2nd Tab</a></li>
      <li><a href="#tab-3">3rd Tab</a></li>
    </ul>
    <div id="tab-1">
      <h2>1st Tab</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
         Maecenas at dui tempor, adipiscing nisl id, tempus nisi. 
         Donec posuere pulvinar lacus, non suscipit eros ultrices. 
      </p>   
    </div> <!-- end of tab-1 div -->

    <div id="tab-2">
      <h2>2nd Tab</h2>
      <p>Suspendisse lacus mi, ornare quis nulla eget, commodo 
         auctor arcu. Proin ut erat vestibulum, vestibulum odio 
         sit amet, dapibus nisi. Morbi nec semper mi. 
      </p>
    </div> <!-- End of tab-2 div -->

    <div id="tab-3">
      <h2>3rd Tab</h2>
      <p>Proin ullamcorper ornare ultricies. Morbi bibendum 
         mauris eu purus rhoncus, id lacinia sapien placerat. 
         Nunc euismod lectus eu elit accumsan dignissim.
      </p>   
      <p><b><span id="myanchor">Anchor is here</span></b>
      </p> 
    </div> <!-- End of tab-3 div -->        
  </div> <!-- End of tabs div -->  
</body>

Any help would be gratefully appreciated. Thanks

The tab name itself is an anchor? Do you mean the `#` is in the name? Do you have some HTML code we can look at? — putvande, Jul 12 '13 at 12:12
@Muthukumar, yes i did try that & it doesn't work. For the tab to open first you must specify the anchor name on the URL. JQuery UI Tabs are designed so that you can do that by specifying the # followed by the tab name on the URL. It's just that anchors are also prefixed with a hash in the URL, so how do I do it? — Dan Gribble, Jul 12 '13 at 13:25
@putvande, i'm assuming JQuery UI uses the hash before the tab name to determine which tab to open on click or via a URL, but after that i don't know how to specify a specific anchor on the URL. I'll put a sample of code up for you to take a look at. — Dan Gribble, Jul 12 '13 at 13:31

score 2 · Accepted Answer · edited Mar 21 '16 at 20:40

I managed to get it working myself by supplying both the tab name and anchor name in the URL, and then parsing it with javascript.

Following that, I then passed the tab number to jquery to open the tab and did a simple animated scroll to the anchor.

e.g. URL is http://www mysite com#tab-3&#myanchor javascript is

$(document).ready(function(){
  var hash_parts = location.hash.split('&', 2); //2 - limit, may be changed if more than two arguments.
  var tab        = hash_parts[0];               // Tab number part of url.  Array starts at 0 for 1st element.
  var anc        = hash_parts[1];               // Anchor name.
  var tabId      = tab.split("-").pop()-1;      // Tab no. relating to Jquery ui index no. (starts at zero for tab 1.)  

  $("#tabs").tabs("option", "active", tabId);  // Select the tab.
  $('html, body').animate({'scrollTop': $(anc).offset().top}, 1000); // Animated scroll to anchor.
});

This is using JQuery UI 1.10.3 and JQuery 1.7.2

TO address an issue using a mobile device, sometimes it will turn the second # into %23.

To fix the error, you would add this line above the last line:

  if(anc !== ''){
    anc = anc.replace('%23', '#');
  }

I made a codepen of this not quite the same.. but in the same spirit. https://codepen.io/digitalbart/pen/QXYxaM — Brian Barthold, Jul 11 '19 at 19:48

score 1 · Answer 2 · answered Jul 12 '13 at 12:47

1

I've found this, can this be helpful for you?

http://raw10.cust.magicedit.com/sandbox/jqueryTabs/

answered Jul 12 '13 at 12:47

Pieter

1,823
1
12
16

Thanks Pieter, that's sort of what i'm looking for, however I want to be able to do this from an external URL. Looking at the source, it appears that this is linking from the same page. I need to do it from a different webpage. – Dan Gribble Jul 12 '13 at 13:22
Indeed, but maybe you can trigger a `onClick`-event when a #tag is found in the url? (http://stackoverflow.com/questions/3552944/how-to-get-the-anchor-from-the-url-using-jquery) – Pieter Jul 12 '13 at 13:33
Hey Pieter, is it possible to do this in jquery ui 1.10? – Rakesh Vadnal Sep 24 '13 at 13:01

Select an anchor within a JQUERY Tab from a link on anther webpage

2 Answers2

Linked