Streaming live at 10am (PST)

Linking and Anchoring with Tabs


#1

I have read through this

http://webflowcodestutorials.webflow.io/click

The section where it explains how to link from one page to another page..opening up tab content on the linked page.

The section header on the tutorial reads, "Tabs – Open a specific tab from a link on other page"

I couldn't get it to work sadly...trying to link the medical conditions in the footer of each page (Peripheral Arterial Disease, Dialysis, etc.) to the TREATMENTS page where the tabs full of information are found. It should most certainly open up the tab without the reader having to manually press the tabbed button.

I'm doing something wrong here...please help!

My webflow link:
https://preview.webflow.com/preview/dr-scott-hollander?preview=bff3bf1595bc76e7770fd135eb44cff0

Thanks in advance :slight_smile:


#2

Hi @nd-artistry, thanks for the question.

This is going to take a couple of steps:

1) Add code to the footer of the site in site settings:

<script>
var Webflow = Webflow || [];
Webflow.push(function () {
  var tabName = getParam('tab');
  if (!tabName) return;

  $('.' + tabName).triggerHandler('click');

  function getParam(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
      results = regex.exec(location.search);
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
  }
});
</script>

2) Setup your links in the URL field in link settings:

/contact?tab=target-tab-link
/?tab=target-tab-link for the home page

3) Custom tab linking only works on the published site, not in preview mode, as custom code only runs on the published site.

Check out this post: http://forum.webflow.com/t/linking-to-specific-tab-from-another-link-or-button/3665

I hope this helps!


#3

Ok cool I'll try and follow this thank you :slight_smile: (not a full-on coder wahhhhh)

Which parts of this code am I changing to match my class names?

I'm assuming all the stuff that says name/tabName?


#4

Hi @nd-artistry, the "target-tab-link" would be the tab name assigned to each tab. It is not necessary to foll with the classes :slight_smile: Let me know how it goes, I am happy to take a look if some tweaks are needed :slight_smile:


#5

Ok so I moved the code to the site settings custom code section (I had it on each page of the custom html).

Here is one of the links

http://dr-scott-hollander.webflow.io/treatments?tab=tab-chrono

It doesn't open the Chronic Venous Insufficiency Tab...


#6

;( still not getting this to work..I would like to learn how to do this... @cyberdave could you have a look to see where I'm wrong in implementing...thanks a mil!


#7

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.