我有两个“onclick”按钮，它们都打开各自的面板。需要什么代码来确保您必须先'x'选定的面板，然后才能通过“其他”按钮查看其他面板？当前，如果你一个接一个地点击，它们就会一个接一个地坐在上面。
这段代码的框架摘自W3学校网站：
下面是我的代码。
<!DOCTYPE html>
<html>
<title>Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.button {
border:none;
display:inline-block;
padding:8px 16px;
vertical-align:middle;
overflow:hidden;
text-decoration:none;
color:#000;
background-color:#ffffff;
text-align:center;
cursor:pointer;
white-space:nowrap;
border: 1px solid #000;
}
.button:hover {
color:#000!important;
background-color:#ccc!important;
}
.closebtn {
border:none;
display:inline-block;
padding:8px 16px;
vertical-align:middle;
overflow:hidden;
text-decoration:none;
color:#fff;
background-color:#000;
text-align:center;
cursor:pointer;
white-space:nowrap;
position: absolute;
right:0;
top:0
}
.closebtn:hover {
color:#000!important;
background-color:#ccc!important;
}
.container,.w3-panel {
padding:0.01em 16px
}
.panel {
margin-top:16px;
margin-bottom:16px;
background-color: #ffffff;
}
.tooltip,.display-container {
position:relative
}
.tooltip .text {
display:none
}
.tooltip:hover .text {
display:inline-block
}
.display-container:hover display-hover {
display:block
}
.display-container:hover span.display-hover {
display:inline-block
}
.display-hover {
display:none}
.display-topright {
position:absolute;right:0;top:0
}
.cvheader {
font-family: 'Libre Baskerville', serif;
font-size: 16px;
font-weight: bold;
}
.pCV {
font-family: 'Libre Baskerville', serif;
font-size: 16px;
line-height: 1.6;
padding: 0;
}
</style>
<body>
<button class="button" onclick="document.getElementById('id01').style.display='block'">CV 1</button>
<button class="button" onclick="document.getElementById('id02').style.display='block'">CV 2</button>
<div id="id01" class="panel display-container" style="display:none">
<span onclick="this.parentElement.style.display='none'"
class="closebtn">x</span>
<h2 class="cvheader">RECENT/ UPCOMING PRESENTATIONS</h2>
<br>
<p class="pCV">Exhibitions, commisions.</p>
<p class="pCV">Exhibitions, commisions.</p>
</div>
<div id="id02" class="panel display-container" style="display:none">
<span onclick="this.parentElement.style.display='none'"
class="closebtn">x</span>
<h2 class="cvheader">PUBLIC EVENTS</h2>
<br>
<p class="pCV">Talks, Exhibitions </p>
<p class="pCV">Talks, Exhibitions </p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<title>Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.button {
border:none;
display:inline-block;
padding:8px 16px;
vertical-align:middle;
overflow:hidden;
text-decoration:none;
color:#000;
background-color:#ffffff;
text-align:center;
cursor:pointer;
white-space:nowrap;
border: 1px solid #000;
}
.button:hover {
color:#000!important;
background-color:#ccc!important;
}
.closebtn {
border:none;
display:inline-block;
padding:8px 16px;
vertical-align:middle;
overflow:hidden;
text-decoration:none;
color:#fff;
background-color:#000;
text-align:center;
cursor:pointer;
white-space:nowrap;
position: absolute;
right:0;
top:0
}
.closebtn:hover {
color:#000!important;
background-color:#ccc!important;
}
.container,.w3-panel {
padding:0.01em 16px
}
.panel {
margin-top:16px;
margin-bottom:16px;
background-color: #ffffff;
}
.tooltip,.display-container {
position:relative
}
.tooltip .text {
display:none
}
.tooltip:hover .text {
display:inline-block
}
.display-container:hover display-hover {
display:block
}
.display-container:hover span.display-hover {
display:inline-block
}
.display-hover {
display:none}
.display-topright {
position:absolute;right:0;top:0
}
.cvheader {
font-family: 'Libre Baskerville', serif;
font-size: 16px;
font-weight: bold;
}
.pCV {
font-family: 'Libre Baskerville', serif;
font-size: 16px;
line-height: 1.6;
padding: 0;
}
</style>
<body>
<button class="button" onclick="openCV1()">CV 1</button>
<button class="button" onclick="openCV2()">CV 2</button>
<div id="id01" class="panel display-container" style="display:none">
<span onclick="this.parentElement.style.display='none'"
class="closebtn">x</span>
<h2 class="cvheader">RECENT/ UPCOMING PRESENTATIONS</h2>
<br>
<p class="pCV">Exhibitions, commisions.</p>
<p class="pCV">Exhibitions, commisions.</p>
</div>
<div id="id02" class="panel display-container" style="display:none">
<span onclick="this.parentElement.style.display='none'"
class="closebtn">x</span>
<h2 class="cvheader">PUBLIC EVENTS</h2>
<br>
<p class="pCV">Talks, Exhibitions </p>
<p class="pCV">Talks, Exhibitions </p>
</div>
</body>
</html>
在js文件中可以添加以下代码：
function openCV1() {
if (document.getElementById('id02').style.display !='block') {
document.getElementById('id01').style.display='block';
}
}
function openCV2() {
if (document.getElementById('id01').style.display !='block') {
document.getElementById('id02').style.display='block'
}
}
