HTML链接到显示特定图像的通用页面

时间:2014-08-30 13:36:58

标签: html

我有一个简单的HTML页面,其中包含一个包含多行的表。每行都有一个单元格,其中包含指向另一个名为" photos.html"的HTML页面的超链接。目前" photos.html"页面显示从主页面链接到的每个图像。我想改变它,以便如果用户点击主页上的超链接," photos.html"页面已打开,但仅显示与特定行相关的图像。

以下是我想要完成的一个简化示例:

<HTML>
    <HEAD>
    </HEAD>

    <BODY>
        <A HREF="photos.html" TARGET="_blank">Link 1</A> <!-- Open "photos.html" with Link 1 images only -->
        <A HREF="photos.html" TARGET="_blank">Link 2</A> <!-- Open "photos.html" with Link 2 images only -->
    </BODY>
</HTML>

HTML中是否可以这样做?

1 个答案:

答案 0 :(得分:0)

使用Jquery

$("a").click(function(event){
  event.preventDefault();
  var url=$(this).attr("href");
  $.ajax({
               url: url,
               success: function(data) {
                   $("img", data).each(function() {
                      alert( $(this).attr("src") );
                   });
               }
   });     
}); 
  

更新

</html>
    <head>
    <script src="code.jquery.com/jquery-1.10.2.js"></script>
    <script>
    $( document ).ready(function() {
       $("a").click(function(event){
          var anchor=$(this);
          event.preventDefault();
          var url=$(this).attr("href");
          $.ajax({
                  url: url,
                  success: function(data) {
                  $("img", data).each(function() {
                         //var img='<img id="theImg" src="'+($(this).attr("src"))+'" />';
                         anchor.next("div.images").append($(this));
                   });
              }
           });     
        }); 
    });
    </script>
    </head>
    <body>
        <A HREF="photos.html" TARGET="_blank">Link 1</A> <!-- Open "photos.html" with Link 1 images only -->
        <div class="images">

        </div>
        <A HREF="photos.html" TARGET="_blank">Link 2</A> <!-- Open "photos.html" with Link 2 images only -->
        <div class="images">

        </div>
    </body>
</html>

data对象包含网页的HTML代码。 在此行alert( $(this).attr("src") );中,您可以访问所有元素。 例如:获取所有DIV代码

$("div", data).each(function() {
    alert( $(this).attr("id") );
});