Javascript 重新加载特定分区

我想在网页上显示一系列图像

该网站是静态的，没有服务器端语言

有没有一种方法可以让网站在点击后像这样加载img1、img2、img3等等，而不是重新加载整个页面

我对html和css非常陌生，但如果有必要，我愿意阅读一些有关JavaScript的内容

关键是尽可能减少站点负载。因此，任何其他提示都将不胜感激

---

如果我没有考虑任何其他网站优化，则会有额外的好处。

您可以在HTML中创建带有空src属性的图像标记：

<img src="" id="image-1">
<img src="" id="image-2">
<img src="" id="image-3">
<a href="#" id="but-1">Load image 1</a>
<a href="#" id="but-2">Load image 2</a>
<a href="#" id="but-3">Load image 3</a>

---

这样，每次单击链接时，每个相应的图像都将加载。

虽然您有一个可接受的答案，但以下是您要查找的内容，即单击时替换DIV

HTML

<input type="button" id="btn1" value="ClickMe">
<div id="dv1">
    <img id="img1" src="">
</div>

---

使用

您需要JavaScript来完成这项工作。类似这样的：（改编自：）。您还可以从查找jQuery click（）和toggle（）事件中获益。嗯，我不确定我是否被否决了，我确实研究了我的问题，但找不到不涉及使用PHP的答案。无论如何，Alex我注意到你的答案是一种使图像可见或不可见的方法。我要寻找的是一种在不再显示第一个图像的情况下，用另一个图像加载该div的方法。有点像img1。。。点击img2。。。点击IMG3这个问题可以用更多的“研究”来回答。尝试阅读这个搜索的顶部结果：不，在我看到的两个例子中，它只是显示了最初不可见的图像。我的问题是，我在寻找一些不同的东西，我在寻找用另一个图像重新填充第一个图像占据的空间。举一个更好的例子，如果你曾经浏览过一个图像库，但你不知道它不仅仅是让一个不可见的图像可见，而是在第一个图像的位置加载另一个图像。谢谢！我有点沮丧，我真的很感激你的回答！

<input type="button" id="btn1" value="ClickMe">
<div id="dv1">
    <img id="img1" src="">
</div>

$( document ).ready(function() {
    var check=0;
    $('#btn1').click(function() {
  var clicks = $(this).data('clicks');
  if (clicks) {
      $("#img1").attr('src', 'url1');
   check++; 
  } else {
      if(check==0){
    $("#img1").attr('src', 'url2');
      }else{ $("#img1").attr('src', 'url3');}
  }
  $(this).data("clicks", !clicks);
});
});