如何使用单个功能来切换多个按钮/图像。这是我现在要进行演示的内容。它仅适用于单个按钮/图像，但我需要进行多个控制。
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>我想使用Pure HTML / CSS做到这一点。它是可以实现的还是如何使此代码更高效。
因此，基本上，我需要每个按钮来控制不同的图像层，以允许单独控制。
谢谢，
这是有一定限制的，但是如果您可以使用复选框并希望使用纯HTML和CSS解决方案，则可以在选中复选框时使用:checked CSS选择器作为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>。
如果要更改复选框相对于元素的位置，则可以使用选择器，例如very nice example by MDN here，也可以使用nth-child-然后可以将复选框放置在内部的任何位置您的网格模板。
确定，这是使用您提供的提示的修改示例。谢谢
nth-childgrid layout
这确实很好。我面临的唯一问题是我必须弄清楚如何锁定背景图像，以及如何将要切换的标记保持在各自的固定位置。每次调整浏览器窗口的大小时，所有内容都会在视觉上中断（有任何提示吗？）...
您的提示有所帮助，现在是纯HTML / CSS。
谢谢，