Using Links to Change Oxygen Tabs

By default, Oxygen’s Tabs element doesn’t allow you to change Tabs on a page when navigating from a Hash link of another page or via an Anchor link on the same page.

Using some JavaScript, we can change the behavior of the Tabs element to allow this to work. To get started, you’ll need a Code Block element on the page or template with the Tabs. Then, add the following code to the JavaScript tab of the element:

jQuery(document).ready( function($) {
	get_active_hash();

	jQuery('.tab-change').click(function(){

		var tabEl = $(this).prop('hash');
		oxy_change_active_tab(tabEl);

	});

	function get_active_hash() {
		if(location.hash){

			var tabHash = $(location.hash);

			oxy_change_active_tab(tabHash);
		}
	}

	function oxy_change_active_tab(el) {

		if(el){
			var tab = jQuery(el);
			var tabClass = null;
			var tabContent = null;
			var tabIndex = null;

			/*Get the appropriate Tab Class*/
			var classList= $(tab).attr('class');
			var classArr = classList.split(/\s+/);

			$.each(classArr, function(index, value){
				if(value.indexOf('tabs') == 0) {

					var tabSplit = value.split('-');
					tabClass = value;
					tabContent  = 'tabs-contents-'+tabSplit[1]+'-tab';
				};
			});

			/*If Tab Class, perform changes*/
			if(tabClass){

				/*Change the active Tab */
				$('.'+tabClass).each(function(index,tabi){

					if($(tabi).attr('id') === $(tab).attr('id')) {
						$(tab).addClass(tabClass+'-active');
						tabIndex = index;
					} else {
						$(tabi).removeClass(tabClass+'-active');
					}

				})

				/*Change the active Tabs Content*/
				$('.'+tabContent).each(function(index,tabs){
					if(index == tabIndex){
						$(tabs).removeClass('oxy-tabs-contents-content-hidden');
					} else {
						$(tabs).addClass('oxy-tabs-contents-content-hidden');
					}
				})
			}

		}
	}

});

After you’ve added that, if you copy the ID of the Tab, and then add it to your Menu link or other link, the Tab should change when you navigate to it.

One last caveat, if you’re using an Anchor on the same page, you’ll want to add the tab-change class to each of the Tab elements.

With all that set, you should now be able to change Tabs when clicking on links around your website!