Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Creating url slugs for tabs on the same page?



I'm answering a question here started in another thread. Please see the question below.

The first thing to do is to point your footer URLs to the support page. Adding a URL hash for each tab. Also I suggest turning off opening links in a new window.


Add the following to your code block.


  $( ( ) => {
    // change tab when URL hash changes
    $( location.hash ).click ( );
    $( window ).on ( 'hashchange', function ( ) {
      $( location.hash ).click ( );
      } );
    } );

This script does two things. First when the page is loaded it attempts to click a tab. The second it looks for URL hash changes and also clicks a tab. The later is for within page hash changes. If you add non tab related ids to the page then the script would probably need to be adjusted to only click on tab related elements.

One thing you might want to consider. Change the id attributes for the tab buttons to something more descriptive. Instead of tab-1, tab-2, etc. Use something like returns-policy, warranty, shipping, and terms-conditions. That way the URLs will be a bit more informative.

Let us know how it goes.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

1 answer to this question

Recommended Posts

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...