不显示选项卡内容的正确内容

Question

无法显示"lagers"的内容:当我按下"lagers"按钮，则显示"英美"的内容。我做错了什么?

下面是我的代码:https://codepen.io/denxero/pen/ExRRqpR

function showTab(beerName) {
let i, tabcontent;
tabcontent = document.getElementsByClassName("tabcontents");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
document.getElementById(beerName).style.display = "grid";
}
const header = document.querySelector(".header");
const links = header.getElementsByClassName("tablink");
for (var i = 0; i < links.length; i++) {
links[i].addEventListener("click", function () {
const current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
currentSlide(1);
});
}
let slideIndex = 1;
showSlides(slideIndex);
function currentSlide(n) {
showSlides((slideIndex = n));
}
function showSlides(n) {
let i;
let slides = document.getElementsByClassName("tabcontents");
let dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = slides.length;
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "grid";
dots[slideIndex - 1].className += " active";
}

.dots {
display: flex;
justify-content: center;
align-items: center;
padding: 8px 0;
}
.dots .dot {
height: 15px;
width: 15px;
background-color: red;
border-radius: 10px;
margin: 0 2px;
transition: background-color 0.6s ease;
}
.dot.active {
background-color: black;
}
.dot:hover {
background-color: black;
}

<section class="header overall-layout">
<button class="tablink" onclick="showTab('lagers')">Lagers</button>
<button class="tablink active" onclick="showTab('anglo')">Anglo-American Ales</button>
<button class="tablink">Belgian-Style Ales</button>
<button class="tablink">Stout and Porter</button>
<button class="tablink">Sour Beer</button>
<button class="tablink">Wheat Beer</button>
<button class="tablink">Other Styles</button>
</section>
<section class="details-beers overall-layout" id="details-beers">
<!-- Anglo-American -->
<div class="tabcontent tabcontents fade" id="anglo">
<div class="title">
<h4>new</h4>
<h4>england</h4>
<h4>i.p.a.</h4>
</div>
<div class="flex-photos1">
<img src="./Photos/new england ipa/ultra violence.png" alt="" />
</div>
<div class="flex-photos2">
<img src="./Photos/new england ipa/koelship.png" alt="" />
</div>
<div class="flex-photos3">
<img src="./Photos/new england ipa/kveik.png" alt="bacchus" />
</div>
<div class="beer-text">
<img src="./Photos/new england ipa/text.png" alt="" />
</div>
</div>
<div class="tabcontent tabcontents fade">
<div class="title">
<h4>black</h4>
<h4>i.p.a.</h4>
</div>
<div class="flex-photos1">
<img src="./Photos/new england ipa/koelship.png" alt="bacchus" />
</div>
<div class="flex-photos2">
<img src="./Photos/new england ipa/koelship.png" alt="bacchus" />
</div>
<div class="beer-text">
<img src="./Photos/new england ipa/text.png" alt="" />
</div>
</div>
<!-- lagers -->
<div class="tabcontent tabcontents fade" id="lagers">
<div class="title">
<h4>marzen</h4>
<h4>oktoberfest</h4>
<h4>beer</h4>
</div>
<div class="flex-photos1">
<img src="./Photos/modern times.png" alt="" />
</div>
<div class="beer-text">
<img src="./Photos/new england ipa/text.png" alt="" />
</div>
</div>
<div class="tabcontent tabcontents fade" id="lagers">
<div class="title">
<h4>apri</h4>
<h4>oktoberfest</h4>
<h4>beer</h4>
</div>
<div class="flex-photos1">
<img src="./Photos/modern times.png" alt="" />
</div>
<div class="beer-text">
<img src="./Photos/new england ipa/text.png" alt="" />
</div>
</div>
<div class="dots" id="slide-control">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>

为简洁起见，我排除了所有按钮的功能，除了"lagers"one_answers";anglo-american"按钮。

Answer 1

如果你在setTimeout中添加显示网格，它应该可以工作，就像这样(而不是js的第9行):

setTimeout(() => {
document.getElementById(beerName).style.display = "grid";
}

但是也许更好的方法是当页面加载到"标签"变量。然后，当按钮被点击时，你浏览标签页，看看它是否是正确的，并添加/删除样式，也许像这样:

const buttons = document.querySelectorAll('.button');
const tabs = document.querySelectorAll('.tab');
let currentTab = 'tab-one';
buttons.forEach((button) => {
button.addEventListener('click', handleButtonClick);
});
function handleButtonClick(event) {
currentTab = event.currentTarget.getAttribute('target-tab');
updateTabsUI();
}
function updateTabsUI() {
tabs.forEach((tab) => {
tab.getAttribute('id') === currentTab ?
tab.classList.add('tab--visible') :
tab.classList.remove('tab--visible');
})
}
updateTabsUI();

.tab {
display: none;
}
.tab.tab--visible {
display: block;
}

<button class="button" target-tab="tab-one">Tab One</button>
<button class="button" target-tab="tab-two">Tab Two</button>
<button class="button" target-tab="tab-three">Tab Three</button>
<div class="tab" id="tab-one">
<p>This is the tab ONE</p>
</div>
<div class="tab" id="tab-two">
<p>This is the tab TWO</p>
</div>
<div class="tab" id="tab-three">
<p>This is the tab THREE</p>
</div>