עלתה לא פעם הדרישה לעשות קישור שמוביל לטאב ספציפי בווידגט טאבים של אלמנטור.
לקוח שעבדתי בשבילו אתמול ממש התעקש על זה, אז כתבתי קוד שעושה את זה כמו קסם!
אז סך הכל יש לנו פה קוד 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'); }) })
דוגמה:
tab1
tab2
last tab
tab1
תוכן דוגמה לטאב תמיכה
tab2
שימו לב שה URL למעלה השתנה לכותרת הטאב
last tab
ועכשיו ה URL נגמר ב #last-tab
היי!
זה ממש עוזר, תודה רבה! רק לא הבנתי – אם הTABS שלי נקראים בשמות שונים – איך אני מגדירה מה יהיה הurl של כל אחד מהם? איפשהו בקוד אני צריכה להכניס את השם שלהם?
תודה
מגניב אחי תודה