Jump to content

Creating url slugs for tabs on the same page?

Recommended Posts

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.

166864146_ScreenShot2021-02-07at1_29_15PM.thumb.png.77de92d62ba5eb96916a2de6b5a0f6f4.png

Add the following to your code block.

<script>

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

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 the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 2 years later...
  • 3 weeks later...
On 2/8/2021 at 10:52 AM, creedon said:

 

Add the following to your code block.

<script>

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

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.

Hey @creedon is there a way to apply this code so the customised slugs are used when clicking on the actual tabs? It works perfectly for navigation links but when I click on the tab blocks themselves, the slugs revert back to #section:nth-child(2) etc.

https://beehyve.squarespace.com/adhd-support-2

 

Thanks so much! 😊

Link to comment

@melaniejaane I don't understand what you are doing.

It appears you are trying to mix CSS syntax with URI fragment behaviour. URI fragments are meant to work with the id attribute of an HTML tag and have no concept of CSS selectors.

Perhaps if you describe the behaviour of the effect you are trying to achieve to us, we can provide some advice.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.