javascript - 使用链接更改图像

Question

现在，我有一个简单的下拉菜单，其中包含“之前”和“之后”两个链接：

<img id="beforeAfter1" src="images/b2.jpg" width="580" height="435"/>
<div class="baDiv">
    <select class="baSelect" onchange="document.getElementById('beforeAfter1').src = this.value">
        <option value="images/b2.jpg">Before</option>
        <option value="images/a2.jpg">After</option>
    </select>
</div>

当我单击其中一个链接时，主图像 src 会发生变化。我想将这些下拉列表转换为普通链接，Before | After但我不太确定如何做到这一点。

谁能帮我？谢谢。

Answer 1

Try this

<a href="#" onclick="document.getElementById('beforeAfter1').src = 'images/b2.jpg';">Before</a>
<a href="#" onclick="document.getElementById('beforeAfter1').src = 'images/a2,jpg';">After</a>

Answer 2

您可以使用 jQuery，例如：

<img id="beforeAfter1" src="images/b2.jpg" width="580" height="435"/>
<a id='before' value="images/b2.jpg">Before</a> |
<a id='after' value="images/a2.jpg">After</a>

<script>
$(document).ready(function(){
  $('#before').click(function(e) {
    e.preventDefault();
    $('#beforeAfter1').attr('src', 'images/b2.jpg');
  });
  $('#after').click(function(e) {
    e.preventDefault();
    $('#beforeAfter1').attr('src', 'images/a2.jpg');
  });
});
</script>