jQuery addClass example

Change class name on click in jQuery

HTML

<div class="tabs">
   
   <!--  Контейнер с вкладками   -->
   <ul class="tab-header">
      <li class="tab-header__item js-tab-trigger active" data-tab="1">Первая</li>
      <li class="tab-header__item js-tab-trigger" data-tab="2">Вторая</li>
      <li class="tab-header__item js-tab-trigger" data-tab="3">Третья</li>
   </ul>
   
   <!--  Контейнер с блоками, которые содержат контент вкладок   -->
   <ul class="tab-content">
      <li class="tab-content__item js-tab-content active" data-tab="1">
         Далеко-далеко за словесными, горами в стране гласных и согласных живут рыбные тексты.
      </li>
      <li class="tab-content__item js-tab-content" data-tab="2">
         Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum rem laboriosam cum repudiandae natus corrupti?
      </li>
      <li class="tab-content__item js-tab-content" data-tab="3">
         Далеко-далеко за словесными горами.
      </li>
   </ul>
   <ul class="tab-header">
      <li class="tab-header__item js-tab-trigger" data-tab="prev">Prev</li>
      <li class="tab-header__item js-tab-trigger" data-tab="next">Next</li>
   </ul>
</div>

CSS

.tabs {
   width: 100%;
   max-width: 500px;
}

/* Стили для списка вкладок */
.tab-header {
   list-style: none;
   padding-left: 0;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   margin: 0;
}

/* Стили для вкладки */
.tab-header__item {
   padding: 10px 20px;
   margin-right: 5px;
   cursor: pointer;
   border: 1px solid #ddd;
}

/* Стили для активной вкладки */
.tab-header__item.active {
   color: red;
   border-bottom: none;
   position: relative;
   background-color: #fff;
}

/* Стиль для списка контейнеров с содержимым вкладок */
.tab-content {
   list-style: none;
   padding: 0;
   margin: 0;
}

/* Стили для контейнера с содержимым вкладки. По умолчанию скрыт. */
.tab-content__item {
   display: none;
   padding: 20px;
   border: 1px solid #ddd;
   margin-top: -1px;
}

/* Стили для активного контейнера вкладки */
.tab-content__item.active {
   display: block;
}

JavaScript

var jsTriggers = document.querySelectorAll('.js-tab-trigger'),
    jsContents = document.querySelectorAll('.js-tab-content'),
    intervalTimer = null,
    runIntervalTimer = null;

jsTriggers.forEach(function(trigger) {
   trigger.addEventListener('click', function() {
		  clearInterval(intervalTimer);
      clearTimeout(runIntervalTimer);
  	  runIntervalTimer = setTimeout(function(){
    		runInterval(1000);
    	}, 3000);

      changeActiveTab(this);
   });
});

function changeActiveTab(trigger) {
	var id = trigger.getAttribute('data-tab'),
		      activeTrigger = document.querySelector('.js-tab-trigger.active'),
          activeContent = document.querySelector('.js-tab-content.active'),
					tid = +activeTrigger.getAttribute('data-tab'),
      		isPrevNextTrigger = (id === "prev" || id === "next");
			if(id === "prev" && tid > 1) {
      	id = tid - 1;
      } else if(id === "next" && tid < (jsTriggers.length - 2)) {
      	id = tid + 1;
      } else if(isPrevNextTrigger) {
      	return;
      }

			var tab = isPrevNextTrigger ? document.querySelector('.js-tab-trigger[data-tab="'+id+'"]') : trigger;
      tab.classList.add('active');

      var content = document.querySelector('.js-tab-content[data-tab="'+id+'"]');
      activeTrigger.classList.remove('active'); // 1
      activeContent.classList.remove('active'); // 3
      content.classList.add('active'); // 4
}

function showNextTab() {
	var activeTrigger = document.querySelector('.js-tab-trigger.active'),
		  tid = +activeTrigger.getAttribute('data-tab');
  if(tid < (jsTriggers.length - 2)) {
  	changeActiveTab(document.querySelector('.js-tab-trigger[data-tab="next"]'));
  } else {
  	changeActiveTab(document.querySelector('.js-tab-trigger[data-tab="1"]'));
  }
}

function runInterval(t){
	intervalTimer = setInterval(function(){
		showNextTab();
	}, t);
}

runInterval(1000);