Как отключить временно все ссылки в меню сайта, jQuery?

Question

[Дмитрий]

Добрый день. На сайте при переходе на новую страницу на открытой странице проигрывается анимация (допустим 3 секунды) топом открывается новая страница. В то время, когда проигрывается закрывающейся страницы мне нужно отключить все пункты меню, что бы они не реагировали на клик пока анимация не закончится.
Пробовал в index убрать класс tabs удалив его в руками все работает, но если я удаляю его скриптом, то ссылки продолжают работать, хоть в панели разработчика класс исчезает.

var links = ['#tab1'];

$('.tabs li a').on('click', function(){
	var id = $(this).attr('href');
	var pages = $(this).parents('.tab-wrap').find('.tab-cont');
	  if(links.indexOf(id)==-1){
			links.unshift(id);
  } 
  var lastId = links[1];
  $(lastId).addClass('anim2');
  
  function pausePage (){
		links.splice([1],1);
		$(pages).addClass('hide').removeClass('anim').removeClass('anim2');
  	$(id).removeClass('hide').addClass('anim');
  }
  setTimeout (pausePage,3000);
		
 	$(this).parent().siblings().removeClass('active');
 	$(this).parent().addClass('active');
	return false;
});

Answer 1

[Сергей c0re]

во первых, вам следовало бы посмотреть что делает метод preventDefault();
далее, не просто вставить его в свой код, а соответственно его изменить.
что вам нужно? на время выполнения каких-то действий заблокировать меню, следовательно в это время обработчик меню не должен выполнять код по onclick
что для этого сделать?
например при загрузке страницы выставлять флаг , назовем его blockLinks = true
в обработчике onclick проверять установлен ли данный флаг и если установлен то просто выходить ничего не выполняя
через 3 секунды после загрузки сбросить флаг в false
все.

и почему вы функцию pausePage и setTimeout запихали внутрь обработчика по onclick меню??

должно быть как-то так:

во время загрузки устанавливается флаг blockLinks
после загрузки страницы (см. $( document ).ready() )
вешается обработчик на click и запускается setTimeout

var links = ['#tab1'];
var blockLinks = true; // флаг блокировки меню

// функция выполняющаяся по истечении таймаута
function pausePage (){
  // сбрасываем флаг блокировки меню
  blockLinks = false;
  // далее остальной код .........
  links.splice([1],1);
  $(pages).addClass('hide').removeClass('anim').removeClass('anim2');
  $(id).removeClass('hide').addClass('anim');
}

$(function(){
// ниже код который выполняется после загрузки страницы
  // устанавливаем обработчик на click
  $('.tabs li a').on('click', function(e){
    // проверяем флаг blockLinks
    if (blockLinks) {
      // если установлена блокировка выходим!
      e.preventDefault();
      return false;
    }
    // здесь ниже код который должен выполняться по клику
    // ................
    // ................
  });
  
  // запускаем таймер
  setTimeout (pausePage,3000);
})

Answer 2

[profesor08]

const links = Array.from(document.querySelectorAll(".menu .link"));

for (const link of links) {
  link.addEventListener("click", e => e.preventDefault());
}

Comments

[Islam Ibakaev]

что при переводе на джиквери будет...

$('.menu').on('click', '.link', function(e) {
    e.preventDefault();
});

[Дмитрий]

Все равно не работает, ссылки открываются

const myLinks = Array.from(document.querySelectorAll(".tabs li a"))
var links = ['#tab1'];
for (const link of myLinks) {
	$('.tabs li a').on('click', function(e){
		e.preventDefault();
		var id = $(this).attr('href');
		var pages = $(this).parents('.tab-wrap').find('.tab-cont');
		  if(links.indexOf(id)==-1){
				links.unshift(id);
	  } 
	  var lastId = links[1];
	  $(lastId).addClass('anim2');
	  
		  	
	  function pausePage (){
			links.splice([1],1);
			$(pages).addClass('hide').removeClass('anim').removeClass('anim2');
	  	$(id).removeClass('hide').addClass('anim');
	  }
	  setTimeout (pausePage,3000);
			
	 	$(this).parent().siblings().removeClass('active');
	 	$(this).parent().addClass('active');
		return false;
	});
}

[profesor08]

Дмитрий, явно что-то делаешь не так

[Сергей c0re]

Дмитрий, потому что вы сделали какую-то лапшу, т.е. смешали пример который вам показали со своим кодом.

[Дмитрий]

Так мне и нужно смешать со своим кодом, ссылки должны деактивироваться на 3 секунды когда добавляется класс anim2 тоже на 3 секунда, а потом активироваться обратно, когда удалиться класс anim2.

[Сергей c0re]

Дмитрий, см. мой ответ. нужно выставить флаг и проверять его, если флаг блокировки установлен то в обработчике click ничего не делая просто выходить!