How can i Link to a Nav Tab Item? Where can I find this link?

I’ve got 5 tabs in a page, and I want to make a button that links to one of these Nav Tab Items.

Tnx in advance!

Thank you for writing in!

You could do that by adding this at your customizer’s custom javascript.

jQuery(window).load(function() {
            
            var tab_nav = jQuery('.x-nav-tabs .x-nav-tabs-item a[href="#' + location.href.split("#").slice(-1)[0] + '"]');
            
            jQuery(tab_nav).click();

            jQuery('html,body').animate({
			      scrollTop: jQuery(tab_nav).offset().top - jQuery('header.masthead').height()
			    },700 ,'swing');

});

Then you could just add url at your button or link with your tab id (eg. #tab-1).

Hope this helps.

I’ve one problem. The link to a specific tab only works with a button from another page, or when I put the link into the browser.

So when the button is at the same page as where the tab is on (The tab where I’m linking to), the link does not work.

Edit: I can see that when I press the button -which is on the same page as the tab- that the link does change in my internet browser, but there is just nothing happening. It is not searching for that specific link.

When I hit enter after selecting the link in my browser, so that he start browsing for that same link, it does work…

Here is the revised code that you can use. 🙂

jQuery(window).load(function() {
  x_scroll_to_tab(jQuery);
});

jQuery(function($){
  $('.link_to_tab').click(function(e){
    e.preventDefault();
    x_scroll_to_tab($);
  });
});

function x_scroll_to_tab($) {
            var tab_nav = $('.x-nav-tabs .x-nav-tabs-item a[href="#' + location.href.split("#").slice(-1)[0] + '"]');
            $(tab_nav).click();
            $('html,body').animate({scrollTop: jQuery(tab_nav).offset().top - jQuery('header.masthead').height() },700 ,'swing');
}

If you add a link, or a button, then you will need to add link_to_tab at their class attribute.

Hope this helps.

What do I have to do to make it work? How does the link of the button has to look like? Maybe explaining it in steps, it will make it understandable for me…

For the link, the code will look like

Text or Image

The button shortcode will look like

[button class=”link_to_tab”]Text[/button]

Hope that helps. 🙂

What is the link I have to use? Is it like this?

http://www.mywebsite.com/look-at-this-tab/#tab-4

Because that does not work.

The steps i did take whas:

1. Putting the code into the custom java script
2. Making a text at the same page where the tab is on with a link like this: http://www.mywebsite.com/look-at-this-tab/#tab-4

Sorry the code above wasn’t wrapped properly to display. It should be

For the link, the code will look like

<a class="link_to_tab" href="#your-url">Text or Image</a>

The button shortcode will look like

[button class="link_to_tab"]Text[/button]

Thanks.

Nothing happens by clicking this link when it is placed at the same page where the tab is at.

Please help!

If could be much easier if you could provide a correct url of your site :).

For the mean time, you could change this :

$('.link_to_tab').click(function(e){
    e.preventDefault();
    x_scroll_to_tab($);
  });

to this :

$('.link_to_tab').live('click', function(e){
    e.preventDefault();
    x_scroll_to_tab($);
  });

from the given code above.

Let us know.