Как на pug сделать табы с разным контентом?

Pug является шаблонизатором, который упрощает создание HTML-страниц. Для создания табов с разным контентом в Pug, необходимо использовать HTML, CSS и JavaScript.

Давайте разобьем эту задачу на несколько шагов:

1. Создайте HTML-разметку с использованием Pug для табов. Вам понадобятся элементы для отображения вкладок и контента каждой вкладки.

.container
  .tabs
    ul
      li.tab
        a(href="#tab1") Вкладка 1
      li.tab
        a(href="#tab2") Вкладка 2
      li.tab
        a(href="#tab3") Вкладка 3
  .content
    #tab1.content-item
      p Контент для Вкладки 1
    #tab2.content-item
      p Контент для Вкладки 2
    #tab3.content-item
      p Контент для Вкладки 3

2. Добавьте стили CSS для табов. Вы можете использовать классы и псевдоэлементы для создания эффектов переключения вкладок.

.container {
  display: flex;
  flex-direction: column;
}

.tabs ul {
  list-style-type: none;
  display: flex;
  justify-content: space-between;
}

.tabs li.tab {
  padding: 10px;
  border: 1px solid gray;
  cursor: pointer;
}

.content .content-item {
  display: none;
}

.content .content-item.active {
  display: block;
}

3. Добавьте JavaScript для обработки событий клика по вкладкам и переключения контента в зависимости от выбранной вкладки.

document.addEventListener("DOMContentLoaded", function() {
  var tabs = document.querySelectorAll(".tab");
  var contentItems = document.querySelectorAll(".content-item");
  
  function setActiveTab(index) {
    tabs.forEach(function(tab, i) {
      if (i === index) {
        tab.classList.add("active");
      } else {
        tab.classList.remove("active"); 
      }
    });
    
    contentItems.forEach(function(item, i) {
      if (i === index) {
        item.classList.add("active");
      } else {
        item.classList.remove("active"); 
      }
    });
  }
  
  tabs.forEach(function(tab, index) {
    tab.addEventListener("click", function() {
      setActiveTab(index);
    });
  });
});

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

Надеюсь, это поможет вам создать табы с разным контентом на Pug.