[Rob DParticipant]

We are having trouble with linking to a tab.

url: https://daveandjessray.com/
WP: 4.4.2
X: Version: 4.3.4
Cornerstone: Version 1.1.3

We’ve tried several methods from other posts on this forum, but none fully work. Our current solution works for #tab-1 but not #tab-2.

The tabs are half way down this page: https://daveandjessray.com/doorpost-songs/

The tabs are linked from the footer menu on all pages as:

<li id="menu-item-538" class="link_to_tab menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-538"><a href="/doorpost-songs/#tab-2">For Churches</a></li>
<li id="menu-item-539" class="link_to_tab menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-539"><a href="/doorpost-songs/#tab-1">For Families</a></li>

and this is in a custom JS file

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');}
}
});

Thanks

[RadModerator]

Hi there,

If you’re linking to the same page, you’ll have to add link_to_tab to class attribute and the URL should be #tab-2 and not /doorpost-songs/#tab-2.

If you’re linking from different pages to your specific page that has tab, then you should remove link_to_tab from class attribute and the URL should be absolute like https://daveandjessray.com/doorpost-songs/#tab-2.

Please try the last option.

Thanks!

[Author]

Posts