0

You can find my example [here] The tabs are working well but just need that extra functionality.

I have <a name="test"></a> next to the header "Anchor" within the "Stuff" tab.

By default the first tab is selected but if someone clicks on a link <a href="#test">Go to anchor</a> then I would like to take them to the third tab and scroll down to <a name="test"></a>.

NickP
  • 357
  • 1
  • 7
  • 18
  • 2
    may be this could help http://stackoverflow.com/questions/1397608/scroll-the-page-to-an-a-with-a-particular-href-with-jquery – Dhiraj May 15 '12 at 06:46
  • Thanks Dhiraj - but that doesn't help. I'm trying to get to the closed tab > to the anchor inside the tabbed content. The scroll animation I can do later. – NickP May 15 '12 at 07:40
  • but i dont see #test link in your site, where should it be ? – Dhiraj May 15 '12 at 07:45

1 Answers1

2

Few changes I made are added goto attribute in anchor tag so that we know which tab to move to.

<a href="#test" goto="stuff">

added the below code to navigate to the anchor tag inside stuff tab

$('html, body').animate({
   scrollTop: x // where a tag is 
});

DEMO

Update: How the Demo works

In the demo are 3 tabs plus content. In the first tab-content is a link to the tab 'Stuff'. If you click on this link the tab changes and the content of the tab 'Stuff' will be shown. The link to change the tab looks like this <a href="#test" goto="stuff">switch to Tab Stuff</a> . The value of goto must be the same value as the hash tag of the tab <li><a href="#stuff">Stuff</a></li>. The function below gets the value of the attribute 'goto' puts the value into the var whereTo and executes a click on the selector matching 'a[href=#' + whereTo + ']'

$('a').not('.tabs li a').on('click', function(evt) {
    evt.preventDefault();
    var whereTo = $(this).attr('goto');
    $tabs = $("ul.tabs li");
    $tabs.find('a[href=#' + whereTo + ']').trigger('click');
    // code shortened to keep explanation simple
}

Hope this helps

Community
  • 1
  • 1
Dhiraj
  • 33,140
  • 10
  • 61
  • 78
  • Dhiraj - thank you so much its PERFECT! Exactly what I was after. One quick question - does the link need to be inside the tabbed content. Can it be outside that area or from another page? – NickP May 15 '12 at 08:18
  • Sorry Dhiraj - am new to this so bear with me. – NickP May 15 '12 at 11:21
  • for that you will have to read the URL paramaters and then do the similar stuff. Use document.location.hash – Dhiraj May 16 '12 at 07:41
  • @DhirajBodicherla Hi i added an explanation of your demo. I hope that this is ok for you. Regards – surfmuggle Oct 29 '12 at 12:00