URL שונה לכל טאב באלמנטור

עלתה לא פעם הדרישה לעשות קישור שמוביל לטאב ספציפי בווידגט טאבים של אלמנטור.
לקוח שעבדתי בשבילו אתמול ממש התעקש על זה, אז כתבתי קוד שעושה את זה כמו קסם!

אז סך הכל יש לנו פה קוד JS קצר שצריך להכניס בקובץ ה JS שלנו או לחלופין בהוק של wp_footer בקובץ functions.php

jQuery(document).ready(function($){
		//get the hash tag
			//hash exist
			setTimeout(function(){
			
			$(".elementor-tab-title").each(function() {
				var name = $(this).find('a').text();
                name = name.replace(/[`~!@#$%^&*()_\-+=\[\]{};:'"\\|\/,.<>?\s]/g, ' ').toLowerCase();
                name = name.replace(/^\s+|\s+$/gm,'');
                name = name.replace(/\s+/g, '-');
				$(this).attr('data-name', name);
			});
				
			var current = window.location.href;
			var current = current.split('#tab-');
			console.log(current[1]);
			if(current.length>1) {	
    			 $('.elementor-tab-title').removeClass('elementor-active');
    			 $('.elementor-tab-title[data-name="'+current[1]+'"]').addClass('elementor-active');
				 var number = $('.elementor-tab-title[data-name="'+current[1]+'"]').attr('data-tab');
    			 $('.elementor-tab-content').hide();
    			 $('.elementor-tab-content[data-tab="'+number+'"]').show();
				 console.log(number);
			 }
			}, 200);
		$('.elementor-tab-title[data-tab]').click(function(){
			var current_location = window.location.href;
			console.log(current_location);
			current_location = current_location.split('#tab-');
			window.location = current_location[0]+'#tab-'+$(this).attr('data-name');
		})
	})	

דוגמה:

תוכן דוגמה לטאב תמיכה

שימו לב שה URL למעלה השתנה לכותרת הטאב

ועכשיו ה URL נגמר ב #last-tab

יוני פריימן

מפתח ובונה אתרים למעלה מארבע שנים. נהנה מכתיבת קוד ומפיצוח פיתוחים מורכבים. נרגש תמיד ללמוד ולחקור עוד על עולם הוורדפרס ועולם הווב בכללותו.

כתיבת תגובה

סגירת תפריט

היי, קוראים לי יוני.

אשמח לבנות לכם את האתר.
פנו אלי, ונבין ביחד איזה אתר אתם צריכים.

השארו מעודכנים!

הרשמו עכשיו וקבלו כל מאמר חדש ישר למייל!