Tagged: anchor links, tabs
-
AuthorPosts
-
September 11, 2020 at 8:28 pm #1245221
We’ve been using anchor links to skip directly to information within tabs. We added the below code to our Child Theme functions.php and the anchor links had been working for about 7 months, but now they’ve stopped working. The built-in tab navigation works to go from tab to tab. And anchor links from other pages to tabbed content work. However, once on the page with tabs, it does not work to use an anchor link to go to another tab. This has broken the 3 links in the main menu only when viewing Spa Services, Spray Tans, or Sun Beds. It has also broken the previous and next buttons at the bottom of each of those tabs to navigate to the other tabs of Equipment.
// custom script for tabs sections so button slides to correct tab section without reloading page
add_action( ‘wp_footer’, ‘ava_custom_script_tab_section’ );
function ava_custom_script_tab_section() {
?>
<script type=”text/javascript”>
(function($) {
function scrollToTab(s, e,) {
$(s).on(e, function(event) {
var anchor, loc, cur, hash, tab, parent, pos;if( e == ‘load’ ) {
loc = window.location.hash;
hash = loc;
} else {
loc = $(this).attr(‘href’);
hash = loc.substring(loc.indexOf(‘#’));
}tab = $(‘.av-section-tab-title[href=’+ hash +’]’);
parent = tab.parents(‘.av-tab-section-outer-container’);
pos = parent.offset();tab.trigger(‘click’);
if(hash) {
setTimeout( function() {
$(window).scrollTop( pos.top – 120 )
}, 1000 );
}
});
}scrollToTab( ‘.menu-item a’, ‘click’ );
scrollToTab( ‘#top .avia-button-wrap a’, ‘click’ );
scrollToTab( ‘#top .avia-buttonrow-wrap a’, ‘click’ );
scrollToTab( ‘.avia-buttonrow-wrap a’, ‘click’ );
})(jQuery);
</script>
<?php
}September 14, 2020 at 12:47 pm #1245744Hey MediaMix1,
Thank you for the inquiry.
We found a few errors in the console related to the script above. Please look for this line..
tab = $('.av-section-tab-title[href='+ hash +']');
.. and replace it with:
tab = $('.av-section-tab-title[href="'+ hash +'"]');
Please don’t forget to purge the cache and remove the browser history before checking the page.
Best regards,
IsmaelSeptember 14, 2020 at 4:10 pm #1245785Thank you this worked!
September 14, 2020 at 9:22 pm #1245853Hi MediaMix1,
Glad we could help :)
If you need further assistance please let us know.
Best regards,
Victoria -
AuthorPosts
- You must be logged in to reply to this topic.