Custom behaviour for tab button

Hi There

I haven’t managed to find this through search although I imagine that it’s a fairly common request.

How does one override the standard behaviour of a tab button. I’ve got some a tabs component which has 5 buttons, for the last button I’d like to, instead of opening a tab, navigate to a url.

Hello!

To do this you just need to assign an ID to the link you want and then add this custom code to the page’s “before /body” code:

<script>
$('a#yourID').click(function(){
  window.open('https://www.webflow.com', '_blank');
  return false;
});
</script>

Hope this helps!

Thanks, that sort of works. It opens a new page but still navigates the tab too (in this case to a blank tab)

Is there any way to prevent the default behaviour of the tab? I’ve tried:

<script>
$('a#target-tab-link').click(function(e){
e.preventDefault();
window.open('https://www.webflow.com', '_blank');
return false;
});
</script>

But it still opens the tab.

1 Like

:wave: did ya get this working? I’m in the same boat - proper redirects but the tab still switches.

Oh boy, I don’t have a clue anymore. 2 years ago is a long time.