Advertisement
Udoro

Link to tab JavaScript

Aug 9th, 2022 (edited)
241
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.26 KB | None | 0 0
  1. document.addEventListener('DOMContentLoaded', () => {
  2.  
  3.  
  4. // FOR LINKS ON SAME PAGE --------------------------------
  5.  
  6.  
  7. //----------only if using wordpress menu -----------------
  8. var linkItems = document.querySelectorAll( ".tab-links a" );
  9.  
  10.  
  11. if(linkItems) {
  12. linkItems.forEach( linkItem =>{
  13. linkItem.classList.add('link-to-tab')
  14. })}
  15. //--------------------------------------------------------
  16.  
  17.  
  18.  
  19. var tabLinks = document.querySelectorAll('.link-to-tab')
  20.  
  21.  
  22. if (tabLinks) {
  23.  
  24. for (i = 0; i < tabLinks.length; i++) {
  25. tabLinks[i].onclick = function(e){
  26. var thisTab = document.querySelector('#' + this.getAttribute("title"))
  27. thisTab.click()
  28. }
  29. }
  30. }
  31.  
  32.  
  33. // FOR LINKS ON ANOTHER PAGE --------------------------------
  34.  
  35.  
  36. var pathname = window.location.href; //get URL
  37. var hashlink = "#" + document.URL.split('#')[1];
  38. var hashTab = document.querySelector(hashlink);
  39.  
  40.  
  41.  
  42. function timeOutFunction() {
  43. timeout = setTimeout(openTab, 0);
  44. }
  45.  
  46. function openTab() {
  47. if( pathname.includes(hashlink) ) {
  48. hashTab.click()
  49. }
  50. //clear timeout
  51. clearTimeout(timeout);
  52. }
  53.  
  54. timeOutFunction() //execute
  55.  
  56. // FOR LINKS ON ANOTHER PAGE ENDS --------------------------------
  57.  
  58.  
  59.  
  60. });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement