CODEWITHSUNDEEP
jqueryhyperlink
NickP
NickP

Reputation: 357

Link to an anchor within JQuery tabbed content

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

Upvotes: 0

Views: 8831

Answers (1)

Dhiraj
Dhiraj

Reputation: 33618

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

Upvotes: 2

Related Questions