Задать вопрос
bootd
@bootd
Гугли и ты откроешь врата знаний!

Как сделать переключение вкладок на нативном js?

Проникся идеей нативного js, которую последнее время сильно продвигают в массы и решил попробовать написать хоть что-то без любимого jquery. Поэтому отложил jquery в сторону и написал простую переключалку вкладок на нативном js. И встал в ступор.
Вот html
<nav id="tabNav">
			<ul class="tabNavList">
				<li><a href="#tab1" class="act">Таб 1</a></li>
				<li><a href="#tab2">Таб 2</a></li>
				<li><a href="#tab3">Таб 3</a></li>
				<li><a href="#tab4">Таб 4</a></li>
			</ul>
		</nav>

		<div id="tabsWrap">
			<div class="tab act" id="tab1">Контент 1</div>
			<div class="tab" id="tab2">Контент 2</div>
			<div class="tab" id="tab3">Контент 3</div>
			<div class="tab" id="tab4">Контент 4</div>
		</div>


А вот что я написал на js
document.addEventListener('DOMContentLoaded', function(){
				'use strict';

				var doc = document,
					tabNavList = doc.querySelectorAll('#tabNav a'),
					tabs = doc.querySelectorAll('.tab');

				var removeClass = function(elem, className){
					var elemLength = elem.length,
						i;

					// Будем использовать цикл, когда элементов в коллекции будет больше 1
					if(elemLength > 1){
						for (i = 0; i < elemLength; i++) {
							elem[i].classList.remove(className);
						}
					} else {
						elem.classList.remove(className);
					}
				};

				for (var i = 0; i < tabNavList.length; i++) {
					tabNavList[i].addEventListener('click', function(event){
						event.preventDefault();

						// Храним id вкладки
						var tabID = doc.getElementById(this.getAttribute('href').slice(1));

						// Активный класс у ссылок
						removeClass(tabNavList, 'act');
						this.classList.add('act');

						// Активный класс у вкладок
						removeClass(tabs, 'act');
						tabID.classList.add('act');
					});
				};
			});


Для меня было диким удивлением, что addEventListener не хотел работать с querySelectorAll, ну и я решил написать цикл, что бы клик работал для всех элементов коллекции! Но как написал это, испугался, чет каким-то говнокодом пахнет)). Смирившись я дошел до того, как добавляю ссылке активный класс, но заступорился, а как удалить у всех других ссылок и табов класс act? Тоже нужно писать цикл для всех элементов в коллекции?
  • Вопрос задан
  • 5808 просмотров
Подписаться 2 Оценить Комментировать
Решения вопроса 2
Тоже нужно писать цикл для всех элементов в коллекции?

Ага.

Ну потом вам это может надоесть, тогда вы оформите все в виде функции (а то и объектами разбрасываться начнете) и потихоньку у вас это будет выливаться в очередную jQuery-подобную библиотеку.
Ответ написан
Stalker_RED
@Stalker_RED
В jQuery много синтаксического сахара, но в ванильном js нет ничего особо страшного.

Да, для того чтобы пройтись по всем элементам коллекции нужно или писать цикл, или использовать какой-нибудь итератор, к примеру map или forEach.
jsfiddle.net/Stalk/78ssvgqp
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
DIITHiTech
@DIITHiTech
Fullstack javascript developer
Такой код нежизнеспособен, ибо хотя бы нет повторного использования кода и Вы будете повторять сами себя, это неизбежно... это если не касаться самого "компонента" ибо это только заготовка.
Абстракцию все ровно придется писать, придется писать минимальный базис для работы с DOM.
Тут у здешних две крайности на эту тему:
1) JQuery везде, JQuery всегда, JQuery любит папа, мама и я... (с) =)
2) Vanilla JS - так давайте же все напишем без абстракций, ядра , библиотек... чем больше сдадим-тем лучше
Писать на "чистом" не освобождает от необходимости грамотно строить код, придерживаться ООП, модульности, юзания библиотек и любых методик позволяющих не повторяться. Да, это приведет к появлению собственных библиотечных функций, возможно микрофеймворка, если не взяли готовый перед этим, но так и должно же быть....
Ответ написан
Комментировать
SagePtr
@SagePtr
Еда - это святое
Можно повесить обработчик на какой-нибудь родительский элемент, к примеру, body. А в обработчике уже проверять target, и если он является одной из вкладок - делать нужное действие. Такой подход хорош тем, что можно будет в рантайме добавлять новые вкладки и не заботиться о том, что придётся снова обработчик на каждую новую вешать.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы