Question

我目前正在开展一个项目，我正在编写一个网页，提供有关人体解剖学的基本图表。我目前正在测试的是使用Javascript功能在按下按钮时在不同图像之间动态切换的能力，这样用户最终将能够在人体的不同视图之间切换。

这是我到目前为止的代码。

<!DOCTYPE html>
<html lang="en">
    <head>
        <script>
            function skin()
            {
                document.getElementById("image").src="humanoutline.jpg";
            }

            function muscle()
            {
                document.getElementById("image").src="humanoutline2.jpg";
            }

            function organs()
            {
                document.getElementById("image").src="humanoutline3.jpg";
            }

            function skeleton()
            {
                document.getElementById("image").src="humanoutline4.jpg";
            }
        </script>
    </head>
    <body>
         <style>

             .button
             {
                 background-color: green;
                 border-radius: 4px;
                 color: white;
                 padding: 15px 32px;
                 text-align: center;
                 text-decoration: none;
                 display: inline-block;
                 font-size: 16px;
             }
               #image
             {
                 position:absolute;
                 width:500px;
                 height:700px;
                 z-index: 0;
                 top: 30%;
                 left: 45%;
                 padding:50px;
                 margin: -100px 0 0 -200px;
                 text-align:center;
                 align-content:center;
                 outline-style:solid;
                 outline-width:1px;
                 outline-color:black;
             }
             #rightside
             {
                 text-align:center;
                 width:400px;
                 height:1000px;
                 padding: 30px;
                 line-height: 100px;
                 float:right;
                 outline-style:solid;
                 outline-width:1px;
                 outline-color:black;
             }

        </style>
        <div id="rightside">
            <p>Select Layer</p>
            <form>
                <button class="button" onclick="skin()">Skin</button><br>
                <button class="button" onclick="muscle()">Muscle</button><br>
                <button class="button" onclick="organs()">Organs</button><br>
                <button class="button" onclick="skeleton()">Skeleton</button><br>
            </form> 
        </div>
        <div>
            <img id="image" src="humanoutline.jpg" alt="Body" style="width:464px;height:700px; ">
        </div>
    </body>
</html>

虽然这应该在理论上有效，但问题在于每当按下每个按钮时，页面只会部分加载新图像，然后切换回默认图像，即humanoutline.jpg。

供参考，以下是我目前使用的四张图片。

humanoutline.jpg：

humanoutline2.jpg：

humanoutline3.jpg：

humanoutline4.jpg：

Answer 1

问题是按钮是＆＃34;提交＆＃34;表单，导致页面重新加载。

简单的解决方案是按如下方式修改您的功能：

function skin() {
    document.getElementById("image").src="humanoutline.jpg";
    // the "return false" will cause the button to NOT submit the form
    return false;
}

然而到目前为止，您编写的代码会很快变大，并且难以维护，因此我建议/提供另一种方法来执行此操作。

您可以更改按钮以调用相同的功能，但传入相关的参数。此外，他们应return，见下文：

        <form>
            <button class="button" onclick="return changeImage('humanoutline.jpg')">Skin</button><br>
            <button class="button" onclick="return changeImage('humanoutline2.jpg')">Muscle</button><br>
            <button class="button" onclick="return changeImage('humanoutline3.jpg')">Organs</button><br>
            <button class="button" onclick="return changeImage('humanoutline4.jpg')">Skeleton</button><br>
        </form>

并且还要更改脚本以接受参数，并在图像中使用该参数：

 function changeImage(img) {
     document.getElementById("image").src=img;
     return false;
 }

Answer 2

您只需将type="button"添加到<button>标记，如下所示：

<form>
  <button type="button" class="button" onclick="skin()">Skin</button><br>
  <button type="button" class="button" onclick="muscle()">Muscle</button><br>
  <button type="button" class="button" onclick="organs()">Organs</button><br>
  <button type="button" class="button" onclick="skeleton()">Skeleton</button><br>
</form>

这是一个有效的变更代码（虽然图片网址与此SO问题中的上传热链接，所以我不确定他们是否继续工作）：http://codepen.io/anon/pen/GZZJVv

使用HTML

2 个答案: