Linking to tabs from nav bar menu

I’m trying to create links from my nav bar menu to my tabs.

I have 5 buttons: Bank connect, automatic saves, set goals, withdraw, earn interest. These are found on my nav bar dropdown menu.

I’d like to link each of them to the corresponding tabs on my ‘how it workss’ page.

I’ve used some custom code on the site settings but I’m not sure if I’m doing it right (useless with java script)

Can anybody help!? Thanks.


Here is my public share link: https://preview.webflow.com/preview/getchip-ae120674ace634bce-4bbf1368e14a3?utm_medium=preview_link&utm_source=dashboard&utm_content=getchip-ae120674ace634bce-4bbf1368e14a3&preview=a88ea8b0fb3f499d63138672cb2f0bb4&mode=preview

Hi @Edward_Whatson, the custom code doesn’t work cross pages. You have to store the click target in Local storage / URL params. Im more familiar with local storage so code might look something like this.

// On all pages, store the clicked target's ID from nav
$('.nav-button').on('click', function(){
  localStorage.setItem('tab', $(this).attr('id'));
}); 

// On How it works page, pull the localStorage
var tab = localStorage.getItem('tab');

$(window).on('load', function() { // You can try $(document).ready as well because load will delay it slightly
  $('.'+tab).click();
})

If it doesn’t work, please share your published link for me/others to troubleshoot in the console. Hope that helps.

Edit: Edited the code slightly. Make sure the Tab buttons has a class that matches the Nav button’s ID.

Unless I’m not understanding correctly, can’t you just link to external url + page section?

1 Like

Correct me if Im wrong, what you are trying to do is link the Buttons in Nav to the Selected tab, right?

/url-sample#id only scrolls the page to the section. So it doesn’t apply to Tabs.

Yeah I did try this, but @dennyhartanto is right in saying it doesn’t apply to tabs. :+1:

I gave it a go, not really sure how this works though. I can’t figure out how the nav button is triggered.

I’ve changed the custom code on all pages:

I named the nav button ID (for auto saves only)
Don’t really understand what to do with the link block settings:

I named tab class to match the nav button ID:

Here’s the published link: https://getchip-ae120674ace634bce-4bbf1368e14a3.webflow.io/how-it-workss

Sorry I’m still new to all this! Appreciate your help.

No worries, let me try to break it down step by step. Ignore the link block settings.

  1. For each of the Nav menu, give them a unique ID. i.e. bank-connect, withdraw, automatic-saves & etc.


  2. For each of the Nav menu, give all of them the same nav-button class.

  3. On all pages add this code. Its a jquery code that triggers whenever the nav-button is clicked and it stores the nav-button’s ID.

$('.nav-button').on('click', function(){
  localStorage.setItem('tab', $(this).attr('id'));
});
  1. On each of the Tabs, give them the same class as the corresponding nav-button. So Bank connect tab should have bank-connect class. This is the linking point between the two.

  2. On every page that has the How It Works tabs. add this chunk of code

var tab = localStorage.getItem('tab');

$(window).on('load', function() { // You can try $(document).ready as well because load will delay it slightly
  $('.'+tab).click();
})

I have tried the code on the published page, it seems to work well. Give it a try :slight_smile:

Hey @dennyhartanto

Thanks for your response I’ve done everything you have suggested but it doesn’t seem to work. I’ve named all the classes and IDs correctly to link the tabs to the nav menu, maybe I haven’t put the custom code in correctly.

I think I must be pretty close, I don’t know if you can figure what I’m doing wrong, if not I might just scrap the tabs for individual pages. :smile:

Here’s a link to the published page: https://getchip-ae120674ace634bce-4bbf1368e14a3.webflow.io/how-it-workss

Here’s the project share link: https://preview.webflow.com/preview/getchip-ae120674ace634bce-4bbf1368e14a3?utm_medium=preview_link&utm_source=dashboard&utm_content=getchip-ae120674ace634bce-4bbf1368e14a3&preview=a88ea8b0fb3f499d63138672cb2f0bb4&mode=preview

Appreciate it!

Ah, as I suspected earlier. It has to be document.ready instead of window.load. Seems to work for me, can you try it? Replace

$(window).on('load', function() { // You can try $(document).ready as well because load will delay it slightly
  $('.'+tab).click();
})

with

$(document).ready(function() {
   $('.'+tab).click();
}))

Hello @dennyhartanto,
I know this post has been here for awhile. I’m trying to achieve the same thing but it doesn’t work on my end somehow.

I have two .nav-link on the navbar on the top of the page

And I want them to change these two tabs here

Here is my read only link: Webflow - Bypass

Could you help? Thanks in advance!