Link to an anchor within JQuery tabbed content

后端 未结 1 1858
借酒劲吻你
借酒劲吻你 2020-12-11 13:33

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

I have next to the

相关标签:
1条回答
  • 2020-12-11 14:06

    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

    0 讨论(0)
提交回复
热议问题