При нажатии на таб автоматическое перелючение табов должно перейти на ручное?

Question

[Игорь Лебедев]

Добрый день! Есть скрипт для атоматического переключения табов. Как сделать так, что бы при нажатии на картинку таба, автоматический режим прекращался и переключать уже только вручную, до перезагрузки страницы.

div class="tabs">
  
 <ul class="tabNavigation">
 <li><a class="" href="#tabs-1">1</a></li>
 <li><a class="" href="#tabs-2">2</a></li>
 <li><a class="" href="#tabs-3">3</a></li>
 </ul>
  
 <div id="tabs-1">
img
 </div>
 <div id="tabs-2">
img
  </div>
 <div id="tabs-3">
img
 </div>
 </div>

$(function() {
    var t = 1;
    function switchTabs() {
        if (t > 3) t = 1;
        if (t == 1) $('div.tabs ul.tabNavigation li a[href="#tabs-1"]').click();
        if (t == 2) $('div.tabs ul.tabNavigation li a[href="#tabs-2"]').click();
        if (t == 3) $('div.tabs ul.tabNavigation li a[href="#tabs-3"]').click();
        t++;
    }
    var sw_tabs_timer1 = window.setInterval(switchTabs, 3000);
});

Comments

[dollar]

Для начала нужно перестать эмулировать клики.

[Stalker_RED]

dollar, не обязательно, можно проверять trusted event

[Сергей delphinpro]

Сначала перепишите эту убогую функцию swithTabs без эмуляции кликов =))

Потом проставьте общий класс для табов. Негоже такие селекторы писать.
<li><a class="my-tab" href="#tabs-1">1</a></li>

Потом все просто:

$(function() {
    var t = 1;
    function switchTabs() {
      // ...
    }
    var sw_tabs_timer1 = window.setInterval(switchTabs, 3000);

    $('.my-tab').on('click', function(){
      clearInterval(sw_tabs_timer1);
    });
});

Можно вставить clearInterval в уже имеющийся обработчик кликов по табам.

[Игорь Лебедев]

Сергей delphinpro, переписал функию, перестало срабатывать автоматическое переключение между вкладками

$(function() {
		var t = 1;
		    function switchTabs() {
		        if (t > 5) t = 1;
		        if (t == 1) $('a.my-tab[href="#tabs_comm1"]').click();
		        if (t == 2) $('a.my-tab[href="#tabs_comm2"]').click();
		        if (t == 3) $('a.my-tab[href="#tabs_comm3"]').click();
		        if (t == 4) $('a.my-tab[href="#tabs_comm4"]').click();
		        if (t == 5) $('a.my-tab[href="#tabs_comm5"]').click();
		        t++;
		    }
		var sw_tabs_timer1 = window.setInterval(switchTabs, 3000);

		$('.my-tab').on('click', function(){

	    	clearInterval(sw_tabs_timer1);
	    });

	});

[Stalker_RED]

Игорь Лебедев, не удивительно, вы же при первом клике сбрасываете таймер.

[Игорь Лебедев]

Stalker_RED, и как же заставить ег праильно работать, точнее работать так, как это необходимо?

[Сергей delphinpro]

Игорь Лебедев, я имел ввиду переписать без использования эмуляции кликов. Изучите как работают вкладки. На крайняк их код покажите, люди подскажут. Ваш метод — костыль. Нужно дорабатывать вкладки, а не лепить ГК поверх них.

Answer 1

[Игорь Лебедев]

Вот ответ по этому вопросу

$(function() {
  var t = 1;

  function switchTabs() {
    if (t > 3) t = 1;
    console.log("switchTabs - ", t);
    if (t == 1) $('a.my-tab[href="#tabs-1"]').click();
    if (t == 2) $('a.my-tab[href="#tabs-2"]').click();
    if (t == 3) $('a.my-tab[href="#tabs-3"]').click();
    t++;
  }
  var sw_tabs_timer1 = window.setInterval(switchTabs, 1000);

  $('a.my-tab').click(function(e) {
    if (e.originalEvent && e.originalEvent.isTrusted) {
      clearInterval(sw_tabs_timer1);
      sw_tabs_timer1 = null;
      console.log("stopped switchTabs");
    }
  });
});

Answer 2

[Stalker_RED]

clearInterval

Comments

[Игорь Лебедев]

Спасибо за материал, но не понял из прочитаного каким образом работает функция и куда прописывать ее непосредственно

[Stalker_RED]

Игорь Лебедев, у вас там в коде есть setInterval, который по кругу переключает табы.
Если вы хотите остановить его - используйте clearInterval

[Игорь Лебедев]

Stalker_RED, дописал строку, но все равно переключение идет по кругу, каким образом остановить, не могу понять. Извеняюсь за огромное количество почему, только въезжаю в эту тему

$(function() {
		var t = 1;
		    function switchTabs() {
		        if (t > 5) t = 1;
		        if (t == 1) $('div.catalog-tabs ul.tabNavigation li a[href="#tabs_comm1"]').click();
		        if (t == 2) $('div.catalog-tabs ul.tabNavigation li a[href="#tabs_comm2"]').click();
		        if (t == 3) $('div.catalog-tabs ul.tabNavigation li a[href="#tabs_comm3"]').click();
		        if (t == 4) $('div.catalog-tabs ul.tabNavigation li a[href="#tabs_comm4"]').click();
		        if (t == 5) $('div.catalog-tabs ul.tabNavigation li a[href="#tabs_comm5"]').click();
		        t++;
		    }
		var sw_tabs_timer1 = window.setInterval(switchTabs, 3000);		
		var sw_tabs_timer1 = window.clearInterval(switchTabs);
	});

[Stalker_RED]

Игорь Лебедев, когда вы запускаете таймер (setInterval) он возвращает номер, который щаписывается в sw_tabs_timer1
для того чтобы остановить этот таймер нужно его передать в clearInterval

clearInterval(sw_tabs_timer1)
И он, кстати, ничего не возвращает.

И вы бы лучше прислушались к советам "не эмулировать клики", вам проще будет в итоге.

[Игорь Лебедев]

Stalker_RED, я не понимаю как это сделать, как правильно прописать эту функцию без эмуляции кликов

[Stalker_RED]

Игорь Лебедев, не совсем понятно чего вы хотите.
Вот вы придумали какую-то свою систему, показали небольшой кусочек из нее, причем неработающий. Вам указали на ошибки.
Дальше что? Хотите чтобы кто-то переписал все с нуля? Ну так есть готовые библиотечки или плагины для табов. Они всяко лучше той фигни которую я напишу за 10 минут. А писать для вас эту библиотеку неделю забесплатно я не собираюсь.

Этот сайт не про "сделайте работу вместо меня" а про "ответы на вопросы".

У вас там один вопрос:

При нажатии на таб автоматическое перелючение табов должно перейти на ручное?

Ответ на него: "Да"

_{подсказка: Можно редактировать вопрос, вносить туда дополнительные данные.
подсказка2: Можно задавать другие вопросы.
подсказка3: "я не понимаю" - это вообще не вопрос.}