Табы Javascript

235
11 сентября 2018, 20:10

Хочу сделать табы возник вопрос как мне сравнить индексы массивов двух классов чтобы по нужному клику выбирался нужный блок, тут я вписываю это вручную.

var tabLink, tabContent; 
    tabLink = document.getElementsByClassName('tab-link'); 
    tabContent = document.getElementsByClassName('tab-content'); 
for (var i=0;i<tabLink.length;i++) { 
	switch(i) { 
		case 0 : tabLink[i].onclick = function(){ 
			for(i=0; i<tabLink.length; i++){ 
				tabContent[i].classList.remove("active") 
			} 
			tabContent[0].classList.toggle("active") 
		} 
			break; 
		case 1 : tabLink[i].onclick = function(){ 
			for(i=0; i<tabLink.length; i++){ 
				tabContent[i].classList.remove("active") 
			} 
			tabContent[1].classList.toggle("active") 
		} 
		break; 
		case 2 : tabLink[i].onclick = function(){ 
			for(i=0; i<tabLink.length; i++){ 
				tabContent[i].classList.remove("active") 
			} 
			tabContent[2].classList.toggle("active") 
		} 
		break; 
	} 
}
<html> 
<head> 
	<title>CSS генератор</title> 
</head> 
<body> 
	<style> 
		.tab-content { 
			display: none; 
		} 
		.active { 
			display: block; 
		} 
	</style> 
	<div> 
		<a class="tab-link" href="#">TAB-1</a> 
		<a class="tab-link" href="#">TAB-2</a> 
		<a class="tab-link" href="#">TAB-3</a> 
	</div> 
	<div class="tab-content"> 
		<p>Блок 1 
</p> 
	</div> 
	<div class="tab-content"> 
		<p>Блок 2 
</p> 
	</div> 
	<div class="tab-content"> 
		<p> 
Блок 3 
</p> 
	</div> 
</body> 
<script src="main.js"></script> 
</html>

Answer 1

А добавить уникальный ID для tab-link и tab-content для вашей задачи не подойдет?. Примерно так

var tabLink = document.getElementById('menu');
tabLink.addEventListener( "click" , function(ev) {
   var hideElement = document.getElementsByClassName('tab-content');
   for(i=0; i<hideElement.length; i++){
      hideElement[i].classList.remove("active")
   }
   var showElemtn = document.querySelectorAll('div#' + ev.target.id + '')[0];
   showElemtn.classList.toggle("active");
    });
READ ALSO
init several dropzone
jQuery

init several dropzone

Как инициализировать множество одинаковых dropzone на одной страничке, подскажите пожалуйста

 237
Вытащить значения из тегов html
jQuery

Вытащить значения из тегов html

Имеется подобного вида конструкция:

 259
Сворачивание структуры
jQuery

Сворачивание структуры

Написал вот такое дерево, но как в самом низу убрать горизонтальную линию не могу понять + подскажите, как можно сделать сворачивание- разворачивание...

 279
есть ли способ определить наличие fatal error в js
jQuery

есть ли способ определить наличие fatal error в js

Существует ли способ определить есть ли какие нибудь ошибки в выполнении js кода, не именно по конкретной функции или переменной а в целом

 242