Создание вкладок с помощью html и javascript

Я новичок в этих вещах, так что это может быть легко. Я хочу создать вкладки со следующим кодом из w3schools. Оригинал находится здесь: https://www.w3schools.com/howto/howto_js_tabs.asp

Я не хочу, чтобы изображения были в разделе табконтент. Поэтому я создал новый класс с именем табуляция и добавил его в javascript. Также я добавил новые события с идентификаторами изображений в html. Но он продолжает показывать другие вкладки при нажатии. Кто-нибудь может помочь?

function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent tabimage");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace("active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += "active";
}

body {font-family: Open Sans;}
.order {
  display: grid;
  /* grid-template-columns: 1fr 1fr;*/
  
}
/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
.tabimage {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

<div class = "order">
<div class = "tab">
  <button class = "tablinks" onclick = "openCity(event, 'London'); openCity(event, 'London1')">London</button>
  <button class = "tablinks" onclick = "openCity(event, 'Paris'); openCity(event, 'Paris1')">Paris</button>
  <button class = "tablinks" onclick = "openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id = "London" class = "tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
    </div>

<div id = "Paris" class = "tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div id = "Tokyo" class = "tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>
  
  <img src = "https://cdn.shopify.com/s/files/1/0044/8718/4457/files/800x600_Wallpaper_Blue_Sky.png?v=1646897329" class = "tabimage" id = "London1">
   <img src = "https://cdn.shopify.com/s/files/1/0044/8718/4457/files/Auckland_Skyline_800x600_80c6b2c0-28bc-4885-8440-a6da7de39c82.jpg?v=1646897329" class = "tabimage" id = "Paris1">
  
  
</div>

getElementsByClassName("tabcontent tabimage") выберет все элементы, имеющие класс tabcontentи класса tabimage. Из них в вашем HTML ровно никто.

— 15.03.2022 12:38

уверены ли вы? есть 3 класса tabcontent и 2 tabimage класса

— 15.03.2022 13:34

Я сказал и, а не или. Нет элементов с оба, и этот синтаксис выберет именно это, как ясно показывают/объясняют примеры под developer.mozilla.org/en-US/docs/Web/API/Document/….

— 15.03.2022 13:36

javascript html

15.03.2022 12:14

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

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

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

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

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

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

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

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

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

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

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

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

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

Ответы 1

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

Как отметил @Cbroe в комментариях:

Если вы используете несколько классов с функцией getElementsByClassName, эта функция будет возвращать только те элементы, которые имеют все определенные классы.

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

document.querySelectorAll(".tabcontent, .tabimage");

Вот пример с querySelectorAll. Обратите внимание, я изменил функцию openCity, чтобы показать город как изображение, если оно есть.

function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.querySelectorAll(".tabcontent, .tabimage");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
  
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace("active", "");
    }
  
    document.getElementById(cityName).style.display = "block";
    if (document.getElementById('img'+cityName)) {
        document.getElementById('img'+cityName).style.display = "block";
    }  
    evt.currentTarget.className += "active";
}

.order {
  display: grid;
  /* grid-template-columns: 1fr 1fr;*/
  
}
/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
.tabimage {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

<div class = "order">
<div class = "tab">
  <button class = "tablinks" onclick = "openCity(event, 'London');">London</button>
  <button class = "tablinks" onclick = "openCity(event, 'Paris');">Paris</button>
  <button class = "tablinks" onclick = "openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id = "London" class = "tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
    </div>

<div id = "Paris" class = "tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div id = "Tokyo" class = "tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>
  
  <img src = "https://cdn.shopify.com/s/files/1/0044/8718/4457/files/800x600_Wallpaper_Blue_Sky.png?v=1646897329" class = "tabimage" id = "imgLondon">
   <img src = "https://cdn.shopify.com/s/files/1/0044/8718/4457/files/Auckland_Skyline_800x600_80c6b2c0-28bc-4885-8440-a6da7de39c82.jpg?v=1646897329" class = "tabimage" id = "imgParis">
  
  
</div>

Альтернативное решение

Для создания контента с вкладками вы также можете работать с атрибутами data-*. Используя это, вы можете легко определить несколько разделов для отображения/скрытия вместо ретрансляции (уникальных) идентификаторов.

Это также устраняет необходимость определять обработчик событий для каждого отдельного элемента, поскольку вы можете запрашивать выбранный атрибут data-*.

В этом случае я связываю атрибут data-origin с элементами, имеющими атрибут data-target.

var origins = document.querySelectorAll("button[data-origin]");

for (let i = 0; i < origins.length; i++) {
  origins[i].addEventListener('click', function(e) {
      // Get all elements with data-origin defined
      var allOrigins = document.querySelectorAll("*[data-origin]");             
      for (i = 0; i < allOrigins.length; i++) {
          allOrigins[i].classList.remove("active");
      }
      
      // Get all elements with data-target defined
      var allTargets = document.querySelectorAll("*[data-target]");
      for (i = 0; i < allTargets.length; i++) {
          allTargets[i].style.display = "none";
      }
      
      //Only get elements of which the data-target attribute matches the value of the data-origin of the clicked  element
      var targets = document.querySelectorAll("*[data-target='"+e.target.dataset.origin+"']");   
      for (i = 0; i < targets.length; i++) {
          targets[i].style.display = "block";      
      }
      
      e.target.classList.add("active");
  });
}

.order {
  display: grid;
  /* grid-template-columns: 1fr 1fr;*/
  
}
/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
.tabimage {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

<div class = "order">
<div class = "tab">
  <button class = "tablinks" data-origin = "London">London</button>
  <button class = "tablinks" data-origin = "Paris">Paris</button>
  <button class = "tablinks" data-origin = "Tokyo">Tokyo</button>
</div>

<div data-target = "London" class = "tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
    </div>

<div data-target = "Paris" class = "tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div data-target = "Tokyo" class = "tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>
  
  <img src = "https://cdn.shopify.com/s/files/1/0044/8718/4457/files/800x600_Wallpaper_Blue_Sky.png?v=1646897329" class = "tabimage" data-target = "London">
   <img src = "https://cdn.shopify.com/s/files/1/0044/8718/4457/files/Auckland_Skyline_800x600_80c6b2c0-28bc-4885-8440-a6da7de39c82.jpg?v=1646897329" class = "tabimage" data-target = "Paris">
  
  
</div>

17.03.2022 08:11

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

Позиционирование двух дочерних div внутри родительского div

Как увеличить ширину полосы прокрутки при наведении на нее курсора пользователя

JavaScript получить подходящий экземпляр объекта IMG без jQuery?

Угловой [mat-dialog-close]="false" не работает

PHP: печатать упорядоченный массив

Аккордеон Bootstrap 5 со встроенным флажком?

Я хочу сделать таблицу судоку У меня есть одна строка, мне нужно три строки в hmtl и css. Как сделать таблицы справа и слева

Загрузка обновленной исходной страницы Python в селене

Изменить порядок столбца начальной загрузки по функции щелчка

Как убрать пробел между div и svg и пробел под svg

Создание вкладок с помощью html и javascript

Ответы 1

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

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