Javascript 将href链接添加到通过js单击显示的图像

类似于我最近问的一个问题，但前一个问题是使用鼠标，所以触摸屏是垃圾

这是带图像的3个div。单击后，它们分别更改为第二个图像，并将其他两个图像重置为标准图像。这一切正常

但是当任何div中的第二个图像处于活动状态时，我希望能够单击此图像并导航到其他页面

---

显然，在html中添加href只会导航并忽略JS效果

谢谢你的阅读

$(document).ready(function(){
     $('#s1').click(function(){
         $('#s1').attr('src', 'images/object/click-1.png');
          $('#s2').attr('src', 'images/object/standard-2.jpg');
           $('#s3').attr('src', 'images/object/standard-3.jpg');
     });
     $('#s2').click(function(){
         $('#s1').attr('src', 'images/object/standard-1.jpg');
          $('#s2').attr('src', 'images/object/click-2.png');
           $('#s3').attr('src', 'images/object/standard-3.jpg');
     });
     $('#s3').click(function(){
          $('#s1').attr('src', 'images/object/standard-1.jpg');
           $('#s2').attr('src', 'images/object/standard-2.jpg');
            $('#s3').attr('src', 'images/object/click-3.png');
     });


});


<div id="section3" class="container-fluid" align="center">
    <div class="row row-centered ">

    <div id="top-box-1" class="col-sm-4"> 
    <img src="images/object/standard-1.jpg" class="std" id="s1" width="300" height="300"/>
    </div>


    <div id="top-box-2" class="col-sm-4">
    <img src="images/object/standard-2.jpg" class="std "id="s2" width="300" height="300"/>
    </div>


    <div id="top-box-3" class="col-sm-4">
    <img src="images/object/standard-3.jpg" class="std" id="s3" width="300" height="300"/>
    </div>

 </div>
</div>

$（文档）.ready（函数（）{
$（'#s1'）。单击（函数（）{
$（'#s1'）.attr（'src'，'images/object/click-1.png'）；
$（'#s2'）.attr（'src'，'images/object/standard-2.jpg'）；
$（'#s3'）.attr（'src'，'images/object/standard-3.jpg'）；
});
$（'#s2'）。单击（函数（）{
$（'#s1'）.attr（'src'，'images/object/standard-1.jpg'）；
$（'#s2'）.attr（'src'，'images/object/click-2.png'）；
$（'#s3'）.attr（'src'，'images/object/standard-3.jpg'）；
});
$（'#s3'）。单击（函数（）{
$（'#s1'）.attr（'src'，'images/object/standard-1.jpg'）；
$（'#s2'）.attr（'src'，'images/object/standard-2.jpg'）；
$（'#s3'）.attr（'src'，'images/object/click-3.png'）；
});
});

由于您已经在处理单击事件，您可能希望在同一事件中执行此逻辑。结构上是这样的：

if (/* some condition */) {
    window.location.href = someUrl;
}

我想你需要定义那个条件是什么。它是否基于图像的当前

src

？像这样的

if ($(this).attr('src') === 'images/object/click-1.png') {
    window.location.href = someUrl;
}

---

（当然，您还必须定义

someUrl

是什么。）

您可以查看

src

现在是否包含“click”。如果没有，则交换

src

和

return false

以停止href:-

$（'#s1'）。单击（函数（e）{
如果（！$（this）.is（“[src*=”单击“]））{
$（'#s1'）.attr（'src'，'images/object/click-1.png'）；
$（'#s2'）.attr（'src'，'images/object/standard-2.jpg'）；
$（'#s3'）.attr（'src'，'images/object/standard-3.jpg'）；
返回false；
}
});

“显然，在html中添加href只会导航并忽略JS效果。”你能解释一下吗？为什么你不能用锚定标签来包装这些图像呢？如果我这样做了，那么点击就会转到www.where-ever，图像不会改变。我有点糊涂，所以我有时会错过显而易见的东西，不确定锚定标签中的包装是什么？非常感谢David，这对我来说似乎是一个很好的解决方案，但它只会在我的页面中起作用，非常感谢你的输入。感谢Ben，这完全符合我的需要，但是我现在需要了解它为什么起作用，或者我会一直问问题；0）无法投票，因为我是新来的。@Huckster我刚刚用解释更新了答案。谢谢@BenG，非常感谢。