[Global BParticipant]

Hi there,

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!

[RadModerator]

Hi GLobal,

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.

[Global BParticipant]

Hi, thank you.

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…

[RadModerator]

Hi GLobal,

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.

[Global BParticipant]

I don’t understand what you mean with: ‘If you add a link, or a button, then will need to add link_to_tab at their class attribute’.

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…

[ChristianModerator]

Hey there,

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

[Global BParticipant]

Sorry, but it doesn’t help, it doesn’t work…. I want to know what the link has to be to make it work.

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

[ChristianModerator]

Hey there,

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.

[Global BParticipant]

It is still the same problem. This link: http://www.mywebsite.com/look-at-this-page/#tab-4 does work from another webpage, but it does not work when it is at the same page as where the tab is located.

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

Please help!

[RadModerator]

Hi Global,

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.

[Global BParticipant]

Hi there,

Changing that only works the first time clicking the button, when clicking at another tab and after that the button again does not work.

I’m sorry, here is the link: http://www.countrycamperverhuur.nl/de-ruime-1-5-persoons-dethleffs-advantage

It’s about the orange buttons ‘Beschrijving’ and ‘Prijzen’. Please click these both buttons and see what happens.

Here is a link from another page to a tab that does work (The first orange button ‘Bekijk beschikbaarheid’): http://www.countrycamperverhuur.nl/beschikbaarheid/

[AlexanderKeymaster]

Hi there Global,

As mentioned above, you’ll need to add the class link_to_tab to your buttons. This will mark them in the HTML, so the script can find them and change their behavior.

Try adding the classes, and let us know how it goes!

[Global BParticipant]

I already did that by using the shortcode with the element ‘Text’, this is what I used:

[button class=”link_to_tab” type=”real” shape=”rounded” size=”small” href=”http://www.countrycamperverhuur.nl/de-ruime-1-5-persoons-dethleffs-advantage/#tab-4″]Prijzen[/button]

When I use the element ‘Button’ in the visual composer, and I add the class Link_to_tab, the button does not work at all. It does not link anywhere.

Please give me a real solution, I did spend a lot of time now at these buttons….

[AlexanderKeymaster]

Hi there,

Try using relative URLs when linking to IDs. For example:

[button class="link_to_tab" type="real" shape="rounded" size="small" href="#tab-4"]Prijzen[/button]

Something is not working right with the buttons added from Visual Composer. Somehow they are getting <span added inside the class attribute instead of your custom class. For example:

I noticed you’re using an outdated version of X and Visual Composer. Can you update to the latest version of X? Afterwards, it should prompt you to install a Visual Composer update.

[Global BParticipant]

I updated the theme. I lost all my customized settings… I have to do it all again…

And last but not least; the buttons still don’t work. Can it ever work? It is not the most complicated question is it?

[Author]

Posts