我对编码非常陌生。我正在尝试创建一系列夏威夷地图，当您选择带有日期的按钮时，政治边界会发生变化。我通过使用 javascript 更改特定国家边界的图像源和 css 样式来实现此目的。目前，我可以选择1782按钮，这样就可以了；然后我会选择 1810 按钮，这样就可以了；但如果我尝试返回 1782 按钮，什么也不会发生。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Map</title>
<link rel="stylesheet" href="CSSHawai'iHistory.css">
</head>
<body>
<!--have a series of dates to click through-->
<div id="Dates">
<button id="hawaii1782" type="clickable-button">1782</button>
<button id="hawaii1810" type="clickable-button">1810</button>
</div>
<br>
<!--Image of Kamehameha's land-->
<img id="Nation" src="https://i.postimg.cc/J0J0yS3R/Waipi-o.png">
<script src="SCRIPTHawai'iHistory.js"></script>
</body>
</html>
Java:
const hawaii1782 = document.querySelector("#hawaii1782");
const hawaii1810 = document.querySelector("#hawaii1810");
const Nation = document.querySelector("#Nation")
var r = document.querySelector(':root');
hawaii1782.onclick = map1782;
hawaii1810.onclick = map1810;
//have 1782 button go to map in 1782
function map1782(){
Nation.src="https://i.postimg.cc/J0J0yS3R/Waipi-o.png";
r.style.setProperty('--country-size','89px');
r.style.setProperty('--east-margin','879px');
r.style.setProperty('--north-margin','360px');
r.style.setProperty('--border1782','red');
r.style.setProperty('--border1810','#feac32');
hawaii1810.onclick = map1810;
}
//have 1810 map go to map in 1810
function map1810(){
Nation.src="https://i.postimg.cc/cLrmrH39/Kingdom-Hawai-i.png";
r.style.setProperty('--country-size', '1150px');
r.style.setProperty('--east-margin','-10px');
r.style.setProperty('--north-margin','-49px');
r.style.setProperty('--border1782','#feac32')
r.style.setProperty('--border1810','red');
hawaii1782.onclick = map1782;
}
CSS:
/*variables*/
:root {
--country-size: 89px;
--east-margin: 879px;
--north-margin: 360px;
--border1782: #feac32;
--border1810: #feac32;
}
body {
background-image:url("https://i.postimg.cc/d1tBvjYs/Blank.png");
background-repeat:no-repeat;
}
/*Kamehameha's land*/
#Nation {
width: var(--country-size);
margin-left: var(--east-margin);
margin-top: var(--north-margin);
background-color:transparent;
}
/*1782 button*/
#hawaii1782{
background-color: #feac32;
color: #0a0a23;
border: 3px solid var(--border1782);
background-image:linear-gradient(#fecc4c, #ffac33);
}
/*1810 button*/
#hawaii1810{
background-color: #feac32;
color: #0a0a23;
border: 3px solid var(--border1810);
background-image:linear-gradient(#fecc4c, #ffac33);
}
我认为问题是由 1810 功能未完成引起的。不过，1810 脚本与 1782 脚本几乎相同，如果我启动 1782 功能，我仍然可以启动 1810 功能。
问题在于，当您单击 1810 按钮时，您会将图像的不可见部分放置在按钮上方。这使得您看起来好像无法单击按钮，而实际上只是有东西挡住了。
要解决此问题，请将 html 代码中的
<img id="Nation" src="https://i.postimg.cc/J0J0yS3R/Waipi-o.png"><div id="Dates">这解决了按钮单击的问题，但现在按钮位于页面底部，并在更改图像时移动。如果您想将按钮保留在页面顶部，我建议将按钮更改为浮动 div 中，您可以在这里了解一些内容：https://www.w3schools.com/cssref/pr_class_float.php .