如何使用单个功能来切换多个按钮/图像。这是我现在的演示。它仅适用于单个按钮/图像，但我需要进行多个控制。
body,
html {
height: 100%;
}
#bg {
background-image: url(http://basicblue.biz/treasure/treasuremap_01.jpg);
height: 100%;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: 1080px 1080px;
position: relative;
}
#menu {
position: absolute;
top: 50px;
left: 50px;
z-index: 100;
}
#menu button {
background-color: lightblue;
border: 1px solid white;
color: darkblue;
padding: 10px 24px;
cursor: pointer;
display: block;
}
#mark01 {
position: absolute;
top: 240px;
right: 490px;
z-index: 80;
}
#mark02 {
position: absolute;
top: 480px;
left: 460px;
z-index: 80;
}
#mark03 {
position: absolute;
bottom: 260px;
right: 490px;
z-index: 80;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<title>Treasure Map</title>
</head>
<body>
<div id="menu">
<button onclick="myMark01()">Marker 1</button>
<button onclick="myMark02()">Marker 2</button>
<button onclick="myMark03()">Marker 3</button>
</div>
<div id="bg">
<img id="mark01" src="http://basicblue.biz/treasure/xmark_01.png">
<img id="mark02" src="http://basicblue.biz/treasure/xmark_02.png">
<img id="mark03" src="http://basicblue.biz/treasure/xmark_03.png">
</div>
<script>
function myMark01() {
var x = document.getElementById("mark01");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function myMark02() {
var x = document.getElementById("mark02");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function myMark03() {
var x = document.getElementById("mark03");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</body>
</html>我想用纯 HTML / CSS 来做到这一点。是否可以实现或者如何使这段代码更高效。
所以基本上我需要每个按钮来控制不同的图像层，以便进行单独控制。
谢谢，
这有点受限，但如果您可以使用复选框并想要纯 HTML 和 CSS 解决方案，则可以使用
:checkedinput:checked + .hidable {
display: none;
}
input:not(:checked) + .showable {
display: none;
}<input type="checkbox" /> Hide text below
<div class="hidable">I am totally not hidden right now</div><br />
<input type="checkbox" /> Show some text below
<div class="showable">It seems I just got shown</div><br />
<input type="checkbox" /> Hide all the elements below, including image
<div class="hidable">
<strong>many elements here</strong>
<strong>hi</strong>
<img src="https://vignette.wikia.nocookie.net/rickandmorty/images/4/41/Garmanarnar.PNG/revision/latest?cb=20160117000927" />
<strong>bye</strong>
</div>实际上，MDN 这里有一个 非常好的示例。
nth-child好的，这是使用您提供的提示进行修改的示例。谢谢
body, html {
height: 100%;
}
#bg {
background-image: url(http://basicblue.biz/treasure/treasuremap_01.jpg);
height: 100%;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: 1080px 1080px;
position: relative;
}
#menu {
display: block;
width: 100px;
}
input:checked + .hidable {
display: none;
}
input:not(:checked) + .showable {
display: none;
}
#mark01 {
position: absolute;
top: 240px;
right: 490px;
}
#mark02 {
position: absolute;
top: 480px;
left: 460px;
}
#mark03 {
position: absolute;
bottom: 260px;
right: 490px;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<title>Treasure Map</title>
</head>
<body>
<div id="bg">
<div id="menu">
<input type="checkbox" /> Marker 1
<div class="showable"><img id="mark01" src="http://basicblue.biz/treasure/xmark_01.png" alt="X Mark Red"></div>
<input type="checkbox" /> Marker 2
<div class="showable"><img id="mark02" src="http://basicblue.biz/treasure/xmark_02.png" alt="X Mark Green"></div>
<input type="checkbox" /> Marker 3
<div class="showable"><img id="mark03" src="http://basicblue.biz/treasure/xmark_03.png" alt="X Mark Magenta"></div>
</div>
</div>
</body>
</html>这个效果真的很好。我面临的唯一问题是我必须弄清楚如何锁定我的背景图像并将我要打开/关闭的标记保持在各自的固定位置。每次调整浏览器窗口大小时，一切都会在视觉上中断（有什么提示吗？）...
您的提示很有帮助，现在是纯 HTML / CSS。
谢谢，