У меня правильно настроены вкладки, то есть заголовки вкладок и контент отображаются правильно. Однако я хочу также отображать отдельный DIV прямо под вкладками в зависимости от того, какие вкладки активны.
На данный момент я получил правильный дополнительный div для отображения при начальной загрузке страницы, но нажатие на заголовки других вкладок не меняет отображаемый div.
document.addEventListener("DOMContentLoaded", function() {
const tabs = document.querySelectorAll(".accomodation-tabs .sppb-tab-content .sppb-tab-pane");
const galleryModules = {
"standard-twin": ".twin-room-gallery",
"standard-double": ".standard-double-gallery",
"luxury-suites": ".luxury-suites-gallery"
};
// Hide all modules within the common container
const allModules = document.querySelectorAll(".accomodation-gallery .sppb-addon");
allModules.forEach((module) => {
module.style.display = "none";
});
// Show the first gallery module (Twin Room Gallery) on page load
const twinRoomModule = document.querySelector(".twin-room-gallery");
twinRoomModule.style.display = "block";
// Add event listener to tab container
const tabContainer = document.querySelector(".accomodation-tabs .sppb-tab-content");
tabContainer.addEventListener("click", function(event) {
const clickedTab = event.target.closest(".sppb-tab-pane");
if (!clickedTab) return; // Ignore clicks outside tabs
// Hide all gallery modules
Object.values(galleryModules).forEach((moduleClass) => {
document.querySelector(moduleClass).style.display = "none";
});
// Show the corresponding gallery module based on the clicked tab
const tabClass = clickedTab.classList[1];
const moduleToShow = galleryModules[tabClass];
document.querySelector(moduleToShow).style.display = "block";
});
});
🤔 А знаете ли вы, что...
JavaScript позволяет создавать динамические и интерактивные веб-приложения.
С небольшим количеством CSS; макет гибкого блока , комбинатор следующего уровня и :has(), вы можете показывать и скрывать элементы с помощью переключателей.
Во-первых, я не написал «Однако я хочу также отображать отдельный DIV прямо под вкладками». Итак, я обновил пример, добавив в него специальные селекторы CSS, в случае, если присутствует дополнительный <div class = "add">, он должен отображаться.
section {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
section label {
order: 1;
display: inline-block;
align-self: start;
padding: .2em;
border: solid thin transparent;
z-index: 100;
}
section label:has(input:checked) {
background: white;
border: solid thin;
border-color: black black transparent;
border-radius: .3em .3em 0 0;
}
section label:has(input:checked)+div.content {
display: block;
}
section label.one:has(input:checked)~div.add.one {
display: block;
}
section label.two:has(input:checked)~div.add.two {
display: block;
}
section label.three:has(input:checked)~div.add.three {
display: block;
}
section input {
display: none;
}
section div.content {
order: 2;
display: none;
width: 100%;
border: solid black thin;
min-height: 5em;
margin-top: -1px;
}
section div.add {
order: 3;
display: none;
width: 100%;
}<section>
<label class = "one"><input type = "radio" name = "tab" checked>Tab one</label>
<div class = "content">Content one</div>
<label class = "two"><input type = "radio" name = "tab">Tab two</label>
<div class = "content">Content two</div>
<label class = "three"><input type = "radio" name = "tab">Tab three</label>
<div class = "content">Content three</div>
<div class = "add two">Add 2</div>
<div class = "add three">Add 3</div>
</section>