嘿那里，
我需要在可切换的顶部栏中使用一些可伸缩的侧边栏。现在，如果我点击顶部栏的按钮，每个边栏都会打开。
我只想打开第一个侧边框，并在单击顶部栏的按钮时将其设置为活动状态。
即使选择了一个边栏，如果单击顶部栏的按钮，也必须重新启动该功能。 （看一下代码片段）
请帮帮我。非常感谢！
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
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(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
function openCard(evt, cardName) {
var i, cardcontent, cardlinks;
cardcontent = document.getElementsByClassName("cardcontent");
for (i = 0; i < cardcontent.length; i++) {
cardcontent[i].style.display = "none";
}
cardlinks = document.getElementsByClassName("cardlinks");
for (i = 0; i < cardlinks.length; i++) {
cardlinks[i].className = cardlinks[i].className.replace(" active", "");
}
document.getElementById(cardName).style.display = "block";
evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();.tablinks {
width: auto;
height: 5rem;
float: left;
padding-left: 2%;
padding-right: 2%;
border: none;
outline: none;
cursor: pointer;
background-color: #000;
color: white;
font-size: 17px;
font-weight: 700;
text-transform: uppercase;
}
/* Change background color of buttons on hover */
.tablinks:hover {
color: #BD1521;
transition: 0.35s all ease;
}
/* Set default styles for tab content */
.tabcontent {
float: left;
width: 100%;
min-height: 69vh;
padding-top: 3%;
color: white;
display: none;
text-align: center;
}
.tabtext{
width: 68%;
}
div.card {
float: left;
border: 1px solid #ccc;
background-color: #f1f1f1;
width: 30rem;
height: 300px;
}
.card img{
float: left;
width: 100%;
}
/* Style the buttons inside the tab */
div.card button {
display: block;
background-color: inherit;
color: black;
padding: 1.5rem;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
transition: 0.3s;
text-transform: uppercase;
}
/* Change background color of buttons on hover */
div.card button:hover {
background-color: #ddd;
}
/* Create an active/current "tab button" class */
div.card button.active {
background-color: #000;
color: white;
}
/* Style the tab content */
.cardcontent {
float: left;
padding-right: 2%;
padding-left: 2%;
margin-left: 1%;
width: 71.7%;
height: auto;
color: black;
text-align: left;
line-height: 1.5rem;
}
<div class="tab">
<button class="tablinks" onclick="openTab(event, 'Reparatur')" id="defaultOpen">REPARATUR & INSTANDSETZUNG</button>
<button class="tablinks" onclick="openTab(event, 'Lackierung')">LACKIERUNG & FOLIERUNG</button>
</div>
<div id="Reparatur" class="tabcontent">
<div class="card">
<button class="cardlinks" onclick="openCard(event, 'con1.0')">Bagatell- und
Blechschäden</button>
<button class="cardlinks" onclick="openCard(event, 'con2.0')">Parkdellen</button>
<button class="cardlinks" onclick="openCard(event, 'con3.0')">Hagelschäden</button>
</div>
<div id="con1.0" class="cardcontent">
<p> Zu unserem Stammkundenkreis gehören renommierte Autohäuser sowie eine Vielzahl von Privat-
Kunden,die wir mit bester Qualitätsarbeit und unseren Serviceleistungen seit vielen Jahren
bedienen.Wir freuen uns auf Sie!
</p>
</div>
<div id="con2.0" class="cardcontent">
<p> Wir sind ein zertifizierter KFZ Meisterbetrieb in den Bereichen Lack, Hagel, Dellen und Karosserie. Mit Qualität, Kompetenz und Service
schaffen wir zufriedene Kunden.
</p>
</div>
<div id="con3.0" class="cardcontent">
<p> Jeder Auftrag wird mit größter Sorgfalt ausgeführt. Die Reparaturen werden von unseren kompetenten Teams zuverlässig und präzise ausgeführt, so wie komplizierte Lackierungen oder
umfangreiche Arbeiten an der Karosserie Ihres Fahrzeugs.
</p>
</div>
</div>
<div id="Lackierung" class="tabcontent">
<div class="card">
<button class="cardlinks" onclick="openCard(event, 'con1.1')">Spot- & Teillackierung</button>
<button class="cardlinks" onclick="openCard(event, 'con2.1')">Komplettlackierung</button>
<button class="cardlinks" onclick="openCard(event, 'con3.1')">Autofolierung</button>
<button class="cardlinks" onclick="openCard(event, 'con4.1')">Kratzerentfernung</button>
<button class="cardlinks" onclick="openCard(event, 'con5.1')">Lackpolitur</button>
<button class="cardlinks" onclick="openCard(event, 'con6.1')">Versiegelung</button>
</div>
<div id="con1.1" class="cardcontent">
<p> Zu unserem Stammkundenkreis gehören renommierte Autohäuser sowie eine Vielzahl von Privat-Kunden,die wir mit bester Qualitätsarbeit und unseren Serviceleistungen seit vielen Jahren bedienen.Wir freuen uns auf Sie!
</p>
</div>
<div id="con2.1" class="cardcontent">
<p> Wir sind ein zertifizierter KFZ Meisterbetrieb in den Bereichen Lack, Hagel, Dellen und Karosserie. Mit Qualität, Kompetenz und Service
schaffen wir zufriedene Kunden.
</p>
</div>
<div id="con3.1" class="cardcontent">
<p> Jeder Auftrag wird mit größter Sorgfalt ausgeführt. Die Reparaturen werden von unseren kompetenten Teams zuverlässig und präzise ausgeführt, so wie komplizierte Lackierungen oder
umfangreiche Arbeiten an der Karosserie Ihres Fahrzeugs.
</p>
</div>
<div id="con4.1" class="cardcontent">
<p> Zu unserem Stammkundenkreis gehören renommierte Autohäuser sowie eine Vielzahl von Privat-Kunden,die wir mit bester Qualitätsarbeit und unseren Serviceleistungen seit vielen Jahren bedienen.Wir freuen uns auf Sie!
</p>
</div>
<div id="con5.1" class="cardcontent">
<p> Wir sind ein zertifizierter KFZ Meisterbetrieb in den Bereichen Lack, Hagel, Dellen und Karosserie. Mit Qualität, Kompetenz und Service
schaffen wir zufriedene Kunden.
</p>
</div>
<div id="con6.1" class="cardcontent">
<p> Jeder Auftrag wird mit größter Sorgfalt ausgeführt. Die Reparaturen werden von unseren kompetenten Teams zuverlässig und präzise ausgeführt, so wie komplizierte Lackierungen oder
umfangreiche Arbeiten an der Karosserie Ihres Fahrzeugs.
</p>
</div>
</div>