Question

嘿，每个人我都知道这个问题是永恒的，但是我是HTML，CSS和Javascript的新手。我实际上是在自我学习如何编码的第四天，请原谅我。

我想测试一个页面，如果您单击一个按钮，它将显示一张图片，如果您单击另一个按钮，它将显示另一张图片。这是到目前为止我得到的，下一步将是什么，为什么？谢谢！

<!doctype html>
<html>
<head>
<title> Just Two Buttons </title>
</head>
<body>
<h1><center> Pick a button! </center></h1>
<img id="dog" src="https://i.ibb.co/x24nhsc/dog-image.jpg" style="display:none;>
<img id="cat" src="https://i.ibb.co/CsGsxJ5/cat-217679.jpg">
<button> Woof! </button>
<button> Meow! </button>
<script> 
</body>
</html>

Answer 1

有很多方法可以实现这一目标。下面的解决方案结合使用onclick和data-*来引用按钮应显示或隐藏的图像。此外，可见性要求显示CSS类“ visible”（尽量避免直接在style属性上设置样式）。

当应该显示图像时，现有的可见图像应该是不可见的。您既可以存储显示的那个，也可以仅从该元素中删除该类，也可以像我所做的那样，从所有图像中删除它。

要获取我们单击的按钮，将this传递给onclick=myclick(this)中的函数。这意味着我们可以访问单击的按钮属性，特别是data-href="dog"。可以通过element.dataset.href来访问。

var dog = document.getElementById("dog");
var cat = document.getElementById("cat");

function myclick(element) {
    dog.classList.remove("visible");
    cat.classList.remove("visible");
    document.getElementById(element.dataset.href).classList.add("visible");
}

.myimage {
    display: none;
}

.visible {
    display: block;
}

<!doctype html>
<html>
    <head>
        <title> Just Two Buttons </title>
    </head>
    <body>
        <h1><center> Pick a button! </center></h1>
        <img class="myimage" id="dog" src="https://i.ibb.co/x24nhsc/dog-image.jpg">
        <img class="myimage visible" id="cat" src="https://i.ibb.co/CsGsxJ5/cat-217679.jpg">
        <button onclick="myclick(this)" data-href="dog"> Woof! </button>
        <button onclick="myclick(this)" data-href="cat"> Meow! </button>
    </body>
</html>

如何使按钮显示特定图片？

1 个答案: