Link to Tabs in Oxygen Builder

This tutorial will provide you some relatively simple JavaScript code to add in Oxygen Builder so that you can enable linking to tabs on the front end. If you have a tabs component on a page and want to be able to link directly to an inner tab, you can do that with this code below.

Add code below in a code block in the JavaScript tab inside Oxygen.

var pathname = window.location.href;

jQuery(document).ready( function() {

function tab_reset() {

    //Remove active state from all tabs
    jQuery('.oxy-tabs-wrapper > *').removeClass('tabs-1086-tab-active');

    //Hide all tab contents
    jQuery('.oxy-tabs-contents-wrapper > *').addClass('oxy-tabs-contents-content-hidden');

}

if( pathname.includes('#account') ) {

    tab_reset();

    jQuery('#_tab-12-12').addClass('tabs-1086-tab-active');
    jQuery('#_tab_content-19-12').removeClass('oxy-tabs-contents-content-hidden');

} else if ( pathname.includes('#posts') ) {

    tab_reset();

    jQuery('#_tab-13-12').addClass('tabs-1086-tab-active');
    jQuery('#_tab_content-20-12').removeClass('oxy-tabs-contents-content-hidden');

} else if ( pathname.includes('#downloads') ) {

    tab_reset();

    jQuery('#_tab-14-12').addClass('tabs-1086-tab-active');
    jQuery('#_tab_content-21-12').removeClass('oxy-tabs-contents-content-hidden');

} else if ( pathname.includes('#membership') ) {

    tab_reset();

    jQuery('#_tab-15-12').addClass('tabs-1086-tab-active');
    jQuery('#_tab_content-22-12').removeClass('oxy-tabs-contents-content-hidden');

} 
  
});

 

Learn more about my Oxygen Builder course here: https://permaslug.com/ultimate-oxygen-course/

Signup For Emails

Want to be notified when new tutorials are released? Signup below for our roundup emails. We promise not to spam and won't blow up your inbox. 
  • This field is for validation purposes and should be left unchanged.
Jonathan Jernigan, Founder
Permaslug and APEX Web Solutions

Join Permaslug

Membership Benefits Include:

  • Ultimate Oxygen Course
  • Ultimate Woocommerce Course
  • ACF Pro Course
  • Material Design Lite
  • Template Downloads
  • Community
  • And more!
register

More Posts

How to Use OxyNinja Core Framework and Classes

The OxyNinja Core Design set for Oxygen Builder is more than just some pre-built classes. It includes an entire Grid framework built right in, allowing you to create complex layouts with ease. Not only that,…
READ post

Free Sandbox Plugin, OxyNinja, Dynamic FAQ, and More

Trying something a bit different today! I'm mashing up a bunch of different Oxygen Builder tutorials, discussions, and plugin reviews into one stream. Some of this content I've wanted to cover but it didn't justify…
READ post

How to Build a Local Directory Membership Site in Oxygen Builder

We'll be building a brand new website that has a membership component to it using MemberPress, Advanced Custom Fields Pro, and Oxygen Builder along with filtering and map results via WP Grid Builder. This site…
READ post
menu
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram