单击href链接时，会加载新图像答案

【问题标题】：on clicking href link a new image gets loaded单击href链接时，会加载新图像
【发布时间】：2017-04-13 09:21:30
【问题描述】：

我在数据文件夹中有 6 张图片和一个带有每个图片链接的 html 页面。默认情况下会加载第一张图片。现在单击第二个链接，第二个图像应该加载替换第一个。其余图像链接的方式相同。有可能吗？

【问题讨论】：

上传你目前尝试过的代码。
嗨，欢迎来到 Stack Overflow。请花时间阅读stackoverflow.com/tour 并查看这些帮助主题stackoverflow.com/help/on-topic 和stackoverflow.com/help/how-to-ask
查看您的问题历史记录，我认为您的问题被禁止的风险很高。当之无愧的问题禁令。
这家伙其实自己也不太会尝试。但是，无论如何，我得到了他想要的。
@Deadpool 我向你的承诺致敬

【解决方案1】：

对于您想要的，您需要使用 javascript 来执行此操作。准确地说，jQuery 对你来说会更容易使用。

我认为这个例子会对你有所帮助：

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<style>
div{width:200px;height:200px;}
img{width:190px;height:190px;}
</style>
</head>

<body>
<div><img src="http://i.imgur.com/3UimJUz.jpg"></div><br/>
<button id="but1">Link 1</button>
<button id="but2">Link 2</button>
<button id="but3">Link 3</button>
<script>
$(document).ready(function(){
$("#but1").click(function(){
	$('img').attr('src','http://i.imgur.com/3UimJUz.jpg');

});
$("#but2").click(function(){
	$('img').attr('src','http://i.imgur.com/tn1IO3v.jpg');
});
$("#but3").click(function(){
	$('img').attr('src','http://i.imgur.com/BfC9rYf.jpg');
});
});

</script>

</body> 

</html>

【讨论】：

【解决方案2】：

通用示例：

<img src="" id="loader">
<a href="#" class="clicker" img-url="http://domain/imgs/1.jpg"> 1</a> 
<a href="#" class="clicker" img-url="http://domain/imgs/2.jpg"> 2</a> 
<a href="#" class="clicker" img-url="http://domain/imgs/3.jpg"> 3</a> 
<a href="#" class="clicker" img-url="http://domain/imgs/4.jpg"> 4</a> 

<a href="#" class="clicker" img-url="http://domain/imgs/N.jpg"> N</a> 

<script>
  $(document).on("click", ".clicker", function(){
    $("#loader").attr ("src", $(this).attr("img-url"));
    return false;
  })
<script>

【讨论】：

【解决方案3】：

请检查这个。我想这可能会对你有所帮助。谢谢。

$(document).ready(function(){
    var imageList = ['https://www.w3schools.com/css/paris.jpg', 'https://www.w3schools.com/css/trolltunga.jpg', 'https://www.w3schools.com/css/rock600x400.jpg', 'https://www.w3schools.com/css/lights600x400.jpg', 'https://www.w3schools.com/css/img_forest.jpg', 'https://www.w3schools.com/css/pineapple.jpg'];
    $('img').attr('src',imageList[0]);
    $("button").click(function(){
      var buttonId = $(this).attr('id').split('-');
      
      $('img').attr('src',imageList[buttonId[1]]);
    });
});

.imageContainer{width:300px;height:300px;}
.imageContainer img{width:280px;height:280px;}

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
  <div class="imageContainer">
    <img src="">
  </div>
  <button id="click-1">Image 1</button>
  <button id="click-2">Image 2</button>
  <button id="click-3">Image 3</button>
  <button id="click-4">Image 4</button>
  <button id="click-5">Image 5</button>
</body> 

</html>

【讨论】：