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

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

javascript jquery html css

Javascript 将缩略图重定向到新html页面上的相应图像,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我试图找出如何重定向img缩略图到新html页面上相应的img 例如：本页包含所有图片的概述此页面包含带有大图片的向下滚动+列我想知道如何将每个图像链接到向下滚动/大图片页面，以便在单击的图像上打开到目前为止，我发现： $(document).ready(function() { "use strict"; $('img.musicd').click(function() { window.location.href = this.clas

我试图找出如何重定向img缩略图到新html页面上相应的img

例如：本页包含所有图片的概述

此页面包含带有大图片的向下滚动+列

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

到目前为止，我发现：

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

这是行不通的。。我知道我需要以某种方式整合

$（“.images”）.hide（）； $（“#een”）.show（）

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

我对javascript比较陌生，我正在寻找最好的方法来解释这个问题。希望有人能给我建议

试试这个。我尽量使它简单。我的代码使用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>


$（函数（）{//我等待DOM加载
$（“#缩略图img”）。在（“单击”上，函数（）{//当我单击缩略图时
var x=$（this.attr（“src”）；//我保存它的src属性
$（“#main”）.attr（“src”，x）；//并将其用作#主映像的src
});
});

为我们提供您的HTML、CSS和JS代码谢谢！因此，保存其src属性后，另一个页面将在该img处打开，id=“main”是另一个页面。。这仍然有效吗？@Emilie不是新页面：它将填充三个缩略图下的

img

标签。您可以在HTML中看到它code@Emilie“这对你有帮助吗？”埃米莉让我更了解。你想有一个缩略图数组，你可以点击，然后图像将在一个新的页面上打开吗？我试图在这个问题中更好地解释它：但是当我做教程时，我建议它不起作用