Streaming live at 10am (PST)

Custom behaviour for tab button


#1

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.


#2

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!


#3

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.