早安，
由于非常感谢stackoverflow用户，我已经成功实现了单击按钮的导航并显示单独的部分。以下代码可以正常工作：
<button class="cupid-blue" href="p03" id="btnTwo" onclick="toggle(this)">📰 p3 </button>
现在，我希望单击其中一张图像具有完全相同的行为，并且我已经按照以下方式对图像进行了编程：
<a href="#p03"><img src="img_snow.jpg" alt="Snow" style="width:100%"></a>
现在，我不太确定如何将onclick =“ toggle（this）”]]链接到我的图像，以确保它可以正常工作并显示正确的部分（在上面的示例中为p03）。到目前为止，我还没有成功。
切换按钮成功调用了以下javascript函数：
function toggleDisplay(className, displayState){ var elements = document.getElementsByClassName(className) for (var i = 0; i < elements.length; i++){ elements[i].style.display = displayState; } } function toggle(){ document.onclick = function(e) { if (e.target.tagName == 'BUTTON') { var href = e.target.getAttribute("href"); toggleDisplay('page', 'none'); document.getElementById(href).style.display = 'block'; } } }我不太清楚问题出在哪里，如果能得到一些指导，我将不胜感激（让我们明确地说，我没有要求任何人为我编写代码！）。
非常感谢您的时间和良好的祝愿
我的HTML代码摘录：
<!DOCTYPE html> <head> <title>Domoos V2 | home</title> <meta http-equiv="refresh" content="360"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/> <meta http-equiv="pragma" content="no-cache"> <link rel="stylesheet" type="text/css" href="css/mystyle.css?rnd=999" /> <script type="text/javascript" src="scripts/display_section.js"></script> </head> <body> <div class="div_screen"> <div class="div_screen_left_frame"> <div class="div_screen_nav1"> <ul id="menu"> <button class="cupid-blue" href="pMain" id="btnOne" onclick="toggle(this)">🏠 Main Page</button> <button class="cupid-blue" href="p03" id="btnTwo" onclick="toggle(this)">📰 p3 </button> </ul> </div> </div> <div class="div_screen_contents_frame"> <div class="page active" id="pMain"> <section class="icon fa fa-bolt"> <div class="column"> <a href="#p03"><img src="img_snow.jpg" alt="Snow" style="width:100%"></a> <center>Chambre 1</center> </div> </section> </div> <div class="page" id="p02"> <section class="icon fa fa-bolt"> Here comes the 2nd section </section> </div> <div class="page" id="p03"> <section class="icon fa fa-bolt"> Here comes the 3rd section </section> </div> <div class="page" id="p04"> <section class="icon fa fa-bolt"> Here comes the 4th section </section> </div> </div> </div> </body> </html>如果可以帮助更好地理解我的问题（虽然不确定），我也在复制我的CSS摘录：
/* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
float: left;
width: 19.0%;
padding: 2px;
}
/* Clear floats after image containers */
.row::after {
content: "";
clear: both;
display: table;
}
.div_screen {
font-family:"Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 90%;
color: blue;
position: fixed;
top: -3;
left: -3;
width: 1005px;
height: 540 px;
border: 2px solid #de2be4;
/*background: red;*/
}
.div_screen_left_frame {
position: absolute;
left: 1px;
top: 1px;
width: 146px;
height:536px;
border: 1px solid blue;
}
.div_screen_contents_frame {
position: absolute;
left: 150px;
top: 99px;
width: 852px;
height:438px;
border: 1px solid blue;
}
.div_screen_icon {
position: absolute;
left: 0px;
top: 0px;
width: 145px;
height: 95px;
border: 1px solid black;
}
.div_screen_nav1 {
position: absolute;
left: 0px;
top: 95px;
width: 145px;
height: 150px;
border: 1px solid black;
}
.div_screen_nav2 {
position: absolute;
left: 0px;
top: 248px;
width: 145px;
height: 287px;
border: 1px solid black;
}
button.cupid-blue {
background-color: #d7e5f5;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d7e5f5), color-stop(100%, #cbe0f5));
background-image: -webkit-linear-gradient(top, #d7e5f5, #cbe0f5);
background-image: -moz-linear-gradient(top, #d7e5f5, #cbe0f5);
background-image: -ms-linear-gradient(top, #d7e5f5, #cbe0f5);
background-image: -o-linear-gradient(top, #d7e5f5, #cbe0f5);
background-image: linear-gradient(top, #d7e5f5, #cbe0f5);
border-top: 1px solid #abbbcc;
border-left: 1px solid #a7b6c7;
border-bottom: 1px solid #a1afbf;
border-right: 1px solid #a7b6c7;
border-radius: 12px;
-webkit-box-shadow: inset 0 1px 0 0 white;
box-shadow: inset 0 1px 0 0 white;
color: #1a3e66;
font: normal 11px/1 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
padding: 6px 0 3px 0;
text-align: center;
text-shadow: 0 1px 1px #fff;
width: 140px;
height: 40px;
margin-top: 4px;
margin-bottom: 4px;
left: 5 px;
}
button.cupid-blue-rooms {
background-color: #d7e5f5;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d7e5f5), color-stop(100%, #cbe0f5));
background-image: -webkit-linear-gradient(top, #d7e5f5, #cbe0f5);
background-image: -moz-linear-gradient(top, #d7e5f5, #cbe0f5);
background-image: -ms-linear-gradient(top, #d7e5f5, #cbe0f5);
background-image: -o-linear-gradient(top, #d7e5f5, #cbe0f5);
background-image: linear-gradient(top, #d7e5f5, #cbe0f5);
border-top: 1px solid #abbbcc;
border-left: 1px solid #a7b6c7;
border-bottom: 1px solid #a1afbf;
border-right: 1px solid #a7b6c7;
border-radius: 12px;
-webkit-box-shadow: inset 0 1px 0 0 white;
box-shadow: inset 0 1px 0 0 white;
color: #1a3e66;
font: normal 11px/1 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
padding: 6px 0 3px 0;
text-align: center;
text-shadow: 0 1px 1px #fff;
width: 130px;
height: 40px;
margin-top: 4px;
margin-bottom: 4px;
left: 5 px;
}
ul {
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
left: 0;
margin: auto;
width: 10%;
padding: 0;
text-align: center;
}
.page{display: none;}
.page.active {display: block;}
[早上好，感谢stackoverflow用户的帮助，我非常感谢，我已经成功实现了单击按钮的功能，以导航到并显示单独的部分。以下代码...
这是您需要的吗？
您可以尝试以下操作：
如果您尝试以一种平滑的方式滚动到一个元素，这里就是一个例子。