Question

我想弄清楚如何将img缩略图重定向到新的html页面上的相应img。

例如：http://www.damondebacker.com/music.html 此页面包含所有图片的概述

http://www.damondebacker.com/musicd.html 此页面包含带有大图片的滚动列+列

我想知道如何将每个图像链接到滚动页面/大图片页面，以便在点击的图像上打开。

到目前为止我找到了这个：

$(document).ready(function() {
      "use strict";
       $('img.musicd').click(function() {
          window.location.href = this.class +'.html' ;
      });
   });

哪个不起作用..而且我知道我需要以某种方式进行整合

$（＆＃34; .images＆＃34;）。haide（）; $（＆＃34; #een＆＃34;）。show（）;

#een是musicdd页面打开时打开的图像的id。

我对javascript相对较新，我正在寻找解释此问题的最佳方法。希望有人能给我建议吗？

Answer 1

试试这个。我保持尽可能简单。我的代码使用jQuery。你在这里：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <div id="thumbnails">
    <img src="one.jpg" alt="...">
    <img src="two.jpg" alt="...">
    <img src="three.jpg" alt="...">
  </div>
  <img src="" alt="..." id="main">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script>
    $(function () {                                   // I wait the DOM loading
      $("#thumbnails img").on("click", function () {  // when I click a thumbnail
        var x = $(this).attr("src");                  // I save its src attribute
        $("#main").attr("src", x);                    // and use it as the src of the #main image
      });
    });
  </script>
</body>
</html>

将缩略图重定向到新html页面上的相应图像

1 个答案: