Happy Friday!
I recently came across a problem where I needed to replace a Webflow tab link with a custom link/button, but Webflow doesn’t allow links/buttons to be placed inside of tab links. The recommended solution is to rebuild the entire tabs UI using custom interactions, but that would have been a total pain.
After some tinkering in ChatGPT, I created a simple solution that involves replacing the original tab link with a custom link/button using JavaScript. This video demo’s how I used the following code on Memberstack’s new pricing page.
Here’s the script:
// Set the desired URL
const url = "https://example.com";
// Create a new element with the new URL and your classes
const newLink = document.createElement("a");
newLink.setAttribute("class", "YOUR_CLASS w-inline-block w-clearfix w-tab-link custom-link-class");
newLink.setAttribute("href", url);
newLink.innerHTML = `
<div class="custom-link-content">
Link Text
</div>`;
// Replace the original element with the new element
const originalLink = document.querySelector("#original-link-id");
originalLink.parentNode.replaceChild(newLink, originalLink);
// Add a click event listener to the new element
// Remove "_blank" to open in the same tab
newLink.addEventListener("click", function(event) {
event.preventDefault();
window.open(url, "_blank");
});
This script creates a new a
element with the desired attributes and inner HTML, replaces the original tab link with the new element using parentNode.replaceChild()
, and adds a click event listener to the new element that redirects to the desired URL in a new tab using window.open()
.
I hope this helps anyone else who is struggling with same issue I was. And I’m happy to help if you have any questions!
Cheers