Tabs (tab link + anchor)

Design help Custom code
1

A matter of life and death! I really need to make sure that when I click on the tab link, my windows (tab content) switch and the auto-scroll occurs. That is an anchor link. This can only be done through code, and here is what I was able to do: https://preview.webflow.com/preview/georges-trendy-project-a05e84?utm_medium=preview_link&utm_source=designer&utm_content=georges-trendy-project-a05e84&preview=d97cba1aabb1b29181c8f1d3d4d91c41&mode=preview
here I created the same tab menu from regular links. I hid the native tab menu, (display: none). And with the help of the code, I was able to change the tabs of the content tab. But I still can’t do auto-scroll (anchor link)! Please help solve the problem. What needs to be added? which script needs to be inserted to scroll the page

https://georges-trendy-project-a05e84.webflow.io/#all

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

1 Like
3

the problem is solved by inserting code

tab 2 - this is the id of the tab link
tab-2-open - this is the id of a regular link that performs the function of opening a tab link through javascript

now clicking on a regular link (linkblock) you perform the function of opening a tab. Because by clicking on a regular link, javascript performs the action of clicking on the tab link. You simply hide the main tab link through display: none and the problem is solved. And then just on a regular link do anchor

<script>

$(‘#tab-1-open’).click(function () {
$(‘#tab-1’).triggerHandler(‘click’);
});
$(‘#tab-2-open’).click(function () {
$(‘#tab-2’).triggerHandler(‘click’);
});

1 Like
4

HI George

Can you share your link please to get the full code?

5

Hi George,

Can you put your read only back up? I’m trying to do the same thing and can’t figure it out.

Thanks

6

https://preview.webflow.com/preview/georges-trendy-project-a05e84?utm_medium=preview_link&utm_source=designer&utm_content=georges-trendy-project-a05e84&preview=06171c10921d5ec79c71d15f4646b0ae&mode=preview

7

https://preview.webflow.com/preview/georges-trendy-project-a05e84?utm_medium=preview_link&utm_source=designer&utm_content=georges-trendy-project-a05e84&preview=06171c10921d5ec79c71d15f4646b0ae&mode=preview

.

8

Screenshot_2020-08-14-16-46-30-897_com.android.chrome
Screenshot_2020-08-14-16-46-30-897_com.android.chrome1440×720 95 KB

tab-1-open is a regular button. just create a link block. tab-1 is the id of your tab menu. ATTENTION tab-1 this id, not class

9

Thanks man! Super helpful

10

I had the same issue and found a simple solution in the forums here and consolidated the code into a quick tutorial. You don’t have to make any edits to the code or tabs and it’s super flexible.

Here’s the tutorial video: