Anchor Link On Tabs?

Ok I have it nearly done, for anyone else who needs this.

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

if($('.eael-advance-tabs').length){
	
		var tabTitle = new Array();
		var i =-1;
		var hashUrl = window.location.hash;
		var hashUrlStrip = hashUrl.replace('#','');
	
	
		//set ID from title and push to array
		$('.eael-tabs-nav ul li .eael-tab-title').each(function(){
			$(this).parent().attr('id', this.innerText.replace(/\s+/g, '-').toLowerCase());
			var titleId = $(this).parent().attr('id');
			tabTitle.push(titleId);
			
			//console.log($(this).parent().attr('id') + ' '  + 'url: ' + hashUrlStrip);
			
			if($(this).parent().attr('id') == hashUrlStrip){
				$(this).parent().addClass('active').removeClass('inactive').removeClass('active-default');
			} else{
				$(this).parent().addClass('inactive').removeClass('active').removeClass('active-default');
			}
		});
	
		$('.eael-tabs-content div').each(function(){
			$(this).attr('id', tabTitle[++i]);
			var contentId = $(this).attr('id');
			
			if($(this).attr('id') == hashUrlStrip){
				$(this).addClass('active').removeClass('inactive').removeClass('active-default');
			} else{
				$(this).addClass('inactive').removeClass('active').removeClass('active-default');
			}
		
		});

	
	}
});

(Doesn’t currently have functionality for same page anchors only coming from a different URL but could be added with an on click function)

But I have an issue with the first title & content tab keeping the active class, any suggestions?

Thanks

@eyebrowse,

Well, we do have a plan to add the Anchor Link option for Tabs in the future. Thank you for providing us with your code & contribution. I will pass it to our Dev team and will let you know.

Thank you.

I’m also very interested in this feature. Any timeline on when it will be released? Has work on it even started yet?

I would like to make use of this feature also. Thanks for any updates you can provide ??

@eyebrowse Did you managed to solve how to inactivate the first tab? I am using your script but can’t figure out either how to do this.

Thank you@

This is big for us. Any update? Even just giving the tabs predefined IDs for now would be ideal and would solve the problem in the short term.

I fixed the code, if anyone still needs it. Thanks a lot OP!

(only works onload for now. You’d have to use onhashchange and maybe wrap it in a function for in-site use…)

jQuery(document).ready( function( $ ) {
//check if there are any eael advanced tabs and if there's a hash.
if($('.eael-advance-tabs').length && "" != window.location.hash){

		let tabTitle = new Array();
		let i =-1;
		let hashUrl = window.location.hash;
		let hashUrlStrip = hashUrl.replace('#','');

		//set class from innerText of .eael-tab-title and push to array
		$('.eael-tabs-nav .eael-tab-title').each(function(){
			let titleName = this.innerText.replace(/[\s??ü?]+/g, '-').toLowerCase();
			$(this).parent().addClass(titleName);
			tabTitle.push(titleName);

			//check against link and activate correct tab
			if($(this).parent().hasClass(hashUrlStrip)){
				$(this).parent().addClass('active').removeClass('inactive').removeClass('active-default');
			} else{
				$(this).parent().addClass('inactive').removeClass('active').removeClass('active-default');
			}
		});

		//do the same thing with the content
		$('.eael-tabs-content > div').each(function(){

			//since the content is in the same order as the title, just compare the array-position (you could solve this with one more int as well...)
			if(tabTitle[++i] == hashUrlStrip){
				$(this).addClass('active').removeClass('inactive').removeClass('active-default');
			} else{
				$(this).addClass('inactive').removeClass('active').removeClass('active-default');
			}
		});
	}
});

• This reply was modified 4 years, 6 months ago by zipjo. Reason: grammar
• This reply was modified 4 years, 6 months ago by zipjo. Reason: clarification