Docs

[timewarp23]

I want to link to specific tabs from the megamenu.
In this example from the services drop down you can go to specific tabs
http://laumont.com/index.html

Here is the X theme I am working on.
http://laumont.com/NEWSITE/scanning/
currently only scanning is up. I am trying to link to
http://laumont.com/NEWSITE/scanning/#tab-3

Also, I am getting random red borders when I click on the tab navigation.

[Nabeel A]

Hi there,

Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

[timewarp23]

Well, I did provide an example

In this example from the services drop down you can go to specific tabs

http://laumont.com/index.html

and here is the X theme I am working on

Here is the X theme I am working on.

http://laumont.com/NEWSITE/scanning/

currently only scanning is up. I am trying to link to

http://laumont.com/NEWSITE/scanning/#tab-3

I have a Tabbed content section on the “scanning” page. From the Main Navigation (megamenu) I want to be able to link to specific tabs. i.e.: Click on Cruse Scanning from the main nag and go to scanning page with Cruse Scanning tab as active.

You also did not address the red boxes that appear on the Tab Nav when clicked.

[Rad]

Hi there,

Thanks for writing in.

That’s possible, add this code at customizer’s custom javascript under Admin > Appearance.

jQuery( function($){ 
$( document ).ready( function(){
scroll_to_tab ( location.href.split("#").slice(-1)[0] );
});

$('a.link_to_tab, .link_to_tab a').on( 'click', function( e ){
var window_base = location.href.split("#").slice(0)[0];
var url_base = $( this ).attr('href').split("#").slice(0)[0];	 
if ( window_base == url_base ) {
scroll_to_tab ( $( this ).attr('href').split("#").slice(-1)[0] );
e.preventDefault();
}

});

function scroll_to_tab ( tab_id ) {
var tab_nav = $('.x-nav-tabs .x-nav-tabs-item a[href="#' + tab_id + '"]');
if(tab_nav.length >=1) {
$( tab_nav ).trigger('click');
$('html,body').animate({scrollTop: $(tab_nav).offset().top - ( $('.x-navbar').height() + 50 ) },700 ,'swing');}
}

});

Since, we can’t enable tab linking to all of your menu items. Then you can selectively add link_to_tab at any menu item’s css class attribute. If you can’t find your menu item’s class attribute, then please enable it at “Screen Options” on top of your page.

Hope this helps.

[timewarp23]

Hmmm… still does not work.
I have toggled the first tab and tab nav as active and not, and it did not work.
I have all menu items under scanning with the class of link_to_tab.

[timewarp23]

This reply has been marked as private.

[Rad]

Hi there,

Please check. Added small fix to the code.

Cheers!

[timewarp23]

fantastic! thanks!
What was the code change? I like to keep records for the future.

[Zeshan]

You’re welcome! 🙂

The updated code is:

jQuery( function($){ 
$( document ).ready( function(){
scroll_to_tab ( location.href.split("#").slice(-1)[0] );
});

$('a.link_to_tab, .link_to_tab a').on( 'click', function( e ){
var window_base = location.href.split("#").slice(0)[0];
var url_base = $( this ).attr('href').split("#").slice(0)[0];	 
if ( window_base == url_base ) {
scroll_to_tab ( $( this ).attr('href').split("#").slice(-1)[0] );
e.preventDefault();
}

});

function scroll_to_tab ( tab_id ) {
var tab_nav = $('.x-nav-tabs .x-nav-tabs-item a[href="#' + tab_id + '"]');
if(tab_nav.length >=1) {
$( tab_nav ).trigger('click');
$('html,body').animate({scrollTop: $(tab_nav).offset().top - ( $('.x-navbar').height() + 50 ) },700 ,'swing');}
}
});

Cheers!

[jozhica]

Following on this topic how do I link to a specific tab from the other tab content?

I need a “Book” that is located in every tab content link to got to Book tab which is #tab-5 on the same page.

[tab_nav type=”seven-up”]
[tab_nav_item title=”Overview” active=”true”]
[tab_nav_item title=”Itinerary” active=””]
[tab_nav_item title=”Inclusion” active=””]
[tab_nav_item title=”Dates/Prices” active=””]
[tab_nav_item title=”Book” active=””]
[tab_nav_item title=”Contact Us” active=””]
[tab_nav_item title=”Reviews” active=””]
[/tab_nav]
[tabs]

[tab] Content Overview
[button shape=”square” size=”mini” float=”none” info=”none” info_place=”top” info_trigger=”hover” href=”#tab-5″]Book[/button]
[/tab]

[tab] Content Itinerary
[button shape=”square” size=”mini” float=”none” info=”none” info_place=”top” info_trigger=”hover” href=”#tab-5″]Book[/button]
[/tab]

This is what I have but the tab is not opening.
When I click on the button the url shows the full link …/portfolio/test/#tab-5 but the tab doesn’t change.

[John Ezra]

Hi Jozhica,

Thanks for writing in! There might be something conflicting, but we can’t be sure until we check the site. To assist you with this issue, would you mind providing us with your URL. This is to ensure that we can provide you with a tailored answer to your situation.

In the meantime could you try seeing if a link (not within a tab) works pointing to a specific tab? This is so we can see if the issue is within the tab. Thanks!

[jozhica]

This reply has been marked as private.

[Zeshan]

Hi there,

Thanks for writing in!

Upon checking, I’m not seeing the provided following JS code in your website:

jQuery( function($){ 
$( document ).ready( function(){
scroll_to_tab ( location.href.split("#").slice(-1)[0] );
});

$('a.link_to_tab, .link_to_tab a').on( 'click', function( e ){
var window_base = location.href.split("#").slice(0)[0];
var url_base = $( this ).attr('href').split("#").slice(0)[0];	 
if ( window_base == url_base ) {
scroll_to_tab ( $( this ).attr('href').split("#").slice(-1)[0] );
e.preventDefault();
}

});

function scroll_to_tab ( tab_id ) {
var tab_nav = $('.x-nav-tabs .x-nav-tabs-item a[href="#' + tab_id + '"]');
if(tab_nav.length >=1) {
$( tab_nav ).trigger('click');
$('html,body').animate({scrollTop: $(tab_nav).offset().top - ( $('.x-navbar').height() + 50 ) },700 ,'swing');}
}
});

It seems you are using a caching plugin (see: http://prntscr.com/6l4e66). I’d recommend that you clear it, and disable during development. This can cause Customizer changes to not take place on the front end. It will eventually show up when the cache regenerates, but it’s not ideal if you’re looking to see your changes immediately. Caching plugins are best to turn on only when you’ve finished building the site.

Thanks!

[jozhica]

Is this correct for the button?

[button shape=”square” size=”mini” float=”none” info=”none” info_place=”top” info_trigger=”hover” href=”#tab-5″ class=”link_to_tab”]Book[/button]

[Zeshan]

Hi there,

Yes, that’s correct. Upon checking, the “Book” link is working for me now. Glad to see that 🙂

Thanks!

[Author]

Posts