I am trying to make the tabs on the page below active the specific pane when hovering over tabs rather than the default on clicking the tabs: www.theyield.com/products/sensing-plus-for-agriculture-copy-2
Page Named: (Sensing+ for Agriculture new (most recent) )
The post where you are referring to is not exactly the same as the tabs on your website. It works with extra buttons outside the tab component.
So you have to change the code a bit: <script> $('.tab-link').hover( function() { $( this ).click(); } ); </script>
and give your tab links the class name of “tab-link”.
That should be working. Are you aware that custom code will not work in preview mode? You have to publish the site in order to see custom code working.
I can’t see the script code anywhere in the code of the page. So it looks like it isn’t implemented right. When i check your preview the script isn’t in the “Before body tag” custom code area of the page? I do see this script: <script> fbq('track', 'ViewContent'); </script>
The code I get from that example page you just sent is:
Which is the code I had previously had until you had mentioned I needed to change it.
I have now changed it back to this original code.
I have given my tabs a class of: custom-button1, custom-button2, custom-button3
And the tab panes a class of: target-tab-link1, target-tab-link2, target-tab-link3
It seems as this code is correct I just must be setting up the classes wrong? I’m not sure. It doesn’t make any sense to me as it seems as everything is in place properly.
The script used isn’t correct it is used in a situation where i used links outside of the tab component. So i don’t know why this is in your code? I referred to the script below in my first post, change .tab-link to .new-tab (as the class of your tab links are now new-tab) and it should work.
Here’s another cloneable project + a tutorial incase anyone gets stuck while trying to implement. Biggest difference with this code is that it only effects the tabs you add a simple data attribute to.
