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

试试这个

<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>

用链接更改图像

2 个答案: