Vanilla Javascript показать вкладку и скрыть другие

прямо сейчас я воссоздаю элемент Bootstrap «Переключаемые / динамические вкладки» (вы можете найти его там — https://www.w3schools.com/bootstrap4/bootstrap_navs.asp), но я не могу запустить свой контент. «Вкладки» работают по назначению, но я не знаю, как заставить их отображать содержимое после нажатия, как я хотел. Я хочу, чтобы они отображали «связанный» div при нажатии и скрывали div, связанные с другими кнопками. Так же, как элемент начальной загрузки. Большое спасибо!

У меня что-то вроде этого: http://jsfiddle.net/Дарлингтон/9kjst3rp/8

let tabs = Array.from(document.querySelectorAll('.subnavBtn'));

const handleClick = (e) => {
  e.preventDefault();
  tabs.forEach(node => {
    node.classList.remove('active-btn');
  });
  e.currentTarget.classList.add('active-btn');

}

tabs.forEach(node => {
  node.addEventListener('click', handleClick)
});

.subnavDiv {
  display: none;
}

.active {
  display: block;
}

.active-btn {
  background-color: red;
}

<nav class = "subnav">
 <button class = "subnavBtn">
   Button 1
 </button>

 <button class = "subnavBtn">
   Button 2
 </button>

 <button class = "subnavBtn">
   Button 3
 </button>
</nav>

<!-- DIVS I WANT TO SHOW -->

<div class = "subnavDiv active">
Content 1
</div>

<div class = "subnavDiv">
Content 2
</div>

<div class = "subnavDiv">
Content 3
</div>

это кажется основной проблемой, я думаю, здесь уже есть решения. В основном вы можете добавить идентификатор, например «tab-1» и «contentTab-1», чтобы запросить соответствующий tabContent, или вы можете назвать атрибут как data-tab-content = «1» в качестве опции вашего запроса.

— 31.03.2019 12:03

javascript tabs

31.03.2019 11:55

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

703

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы можете сделать это, выполнив следующие шаги

Сохраните все элементы div (содержимое) в массиве в глобальной области видимости.
Передайте вторую переменную btn для handleClick
В forEach() отправьте элемент текущего индекса в handleClick в качестве второго параметра
Внутри класса handleClick удалите active класс из всех div
Наконец добавьте класс active в btn(второй параметр функции)

let tabs = Array.from(document.querySelectorAll('.subnavBtn'));
let contents = Array.from(document.querySelectorAll('.subnavDiv'));


const handleClick = (e,btn) => {
  e.preventDefault();
  tabs.forEach(node => {
    node.classList.remove('active-btn');
  });
  e.currentTarget.classList.add('active-btn');
  contents.forEach(x => x.classList.remove('active'))
  btn.classList.add('active');

}

tabs.forEach((node,i) => {
  node.addEventListener('click',(e) => handleClick(e,contents[i]))
});

.subnavDiv {
  display: none;
}

.active {
  display: block;
}

.active-btn {
  background-color: red;
}

<nav class = "subnav">
 <button class = "subnavBtn">
   Button 1
 </button>

 <button class = "subnavBtn">
   Button 2
 </button>

 <button class = "subnavBtn">
   Button 3
 </button>
</nav>

<!-- DIVS I WANT TO SHOW -->

<div class = "subnavDiv active">
Content 1
</div>

<div class = "subnavDiv">
Content 2
</div>

<div class = "subnavDiv">
Content 3
</div>

31.03.2019 12:01

Ответ принят как подходящий

Ответ @Maheer Ali в порядке, вот альтернатива, использующая атрибуты данных, чтобы указать, какая вкладка связана с каждой кнопкой:

const buttons = document.querySelectorAll('.subnavBtn');
const divs = document.querySelectorAll('.subnavDiv');

const handleClick = e => {
  e.preventDefault();
  
  // Buttons
  buttons.forEach(node => node.classList.remove('active-btn'));
  e.currentTarget.classList.add('active-btn');
  
  // Divs (tabs)
  divs.forEach(node => node.classList.remove('active'));
  [...divs].filter(div => div.dataset.tab === e.currentTarget.dataset.tab)[0].classList.add('active');
}

buttons.forEach(node => node.addEventListener('click', handleClick));

.subnavDiv { display: none; }
.active { display: block; }
.active-btn { background-color: red; }

<nav class = "subnav">
 <button class = "subnavBtn active-btn" data-tab = "1">Button 1</button>
 <button class = "subnavBtn" data-tab = "2">Button 2</button>
 <button class = "subnavBtn" data-tab = "3">Button 3</button>
</nav>

<div class = "subnavDiv active" data-tab = "1">Content 1</div>
<div class = "subnavDiv" data-tab = "2">Content 2</div>
<div class = "subnavDiv" data-tab = "3">Content 3</div>

31.03.2019 12:10

Другие вопросы по теме

Symfony 3.4.6 - SonataAdmin - configureFromFields - Вкладки - Добавить изображение на вкладку

HTML: как обновлять страницу/документ при каждом нажатии вкладок в html?

TabLayout с двумя вкладками одна 75% другая 25%

Реализация реагирующих хуков useState в контейнере вкладок material-ui не работает

Куча памяти увеличивается, когда вкладка Chrome неактивна

Как загрузить содержимое вкладки ReactStrap, когда она выбрана или активна?

Как повторно использовать список во вкладках?

Nativescript TabView загружается только один раз

Как перейти из позиции вкладки OnTabSelected в addDotsIndicator

Есть ли способ иметь многоцветную панель вкладок во флаттере?

Vanilla Javascript показать вкладку и скрыть другие

Ответы 2

Другие вопросы по теме

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