Question

一直试图找到解决方案，但通常所有方法都涉及鼠标悬停或鼠标点击图像本身而不是交换两个图像的超链接 - 或者必须单击4个单独的链接才能查看4个不同的图像例如。

    <div id="aboutus">
    <a href="#>More about us...</a>

    <img id="introimage" src="images/img1.jpg" style="display:block">
    <img id="introimage" src="images/img2.png" style="display:none"/>
    </div>

简单地说，我希望“更多关于我们”链接在点击时交换显示图像 - 或者让我在每次点击时交换两个图像的任何其他方法。

Answer 1

正如我在评论中所说，你应该更改ID，使它们是唯一的或使它们成为类（正如我在本例中所做的那样）。

<强> HTML

<div id="aboutus">
    <a href="#" class="introimagetoggle">More about us...</a>
    <img class="introimage" src="images/img1.jpg" style="display:block">
    <img class="introimage" src="images/img2.png" style="display:none"/>
</div>

<强>的Javascript

$(function() {
    $("a.introimagetoggle").on("click", function(event) {
        event.preventDefault();
        $("img.introimage").toggle();
    });
});

你可能会弄乱检查哪个图像是可见的，然后根据它设置每个图像的显示状态，但切换很简单，适合这个特定的实例。

如何仅使用一个单独的超链接在两个图像之间切换

1 个答案: