首页 文章

如何使用Jquery更改另一个Image的<a href“”onclick？

提问于
浏览 次
1

当点击另一个div（图库）中的图像时，我有一个脚本来更改div（main_view）中显示的img src：

JS

//Swap Image on Click
   $("ul.thumb li a").click(function() {
    var mainImage = $(this).attr("href"); //Find Image Name
    $("#main_view img").attr({ src: mainImage });
    return false;
   });

HTML

<div id="gallery">
  <ul class="thumb">
    <li><a href="images/childrentxt.png"><img src="images/buttons/kids.png"
         title="children.htm" /></a></li>
    <li><a href="images/martialartstxt.png"><img src="images/buttons/dee.png"
         title="mma.htm" /></a></li>   
    <li><a href="images/cardiotxt.png"><img src="images/buttons/cardio.png"
         title="fitness.htm" /></a></li>
    <li><a href="images/combattxt.png"><img src="images/buttons/tristan.png"
         title="combat.htm" /></a></li>
  </ul>
</div>

<div id="main_view">
    <a href="fitness.htm" title="Mixed Martial Arts" target="_self">
    <img src="images/maintxt.png" alt="" /></a>
</div>

然后，我想允许用户单击main_view div中显示的图像以导航到与该图像关联的页面 .

我是jquery和js的新手，并且在编写脚本时没有成功 .

目前，“main_view的img src”可以在“gallery is a href”中找到 . 我一直在尝试使用“gallery img title”来存储用于更新“main_view a href”onclick的值 . 有人可以帮帮我吗？？

谢谢，特蕾西

jquery

2 回答

  • 1

    首先，我不建议使用 title 属性来存储 href . Headers 是为了别的东西 . 相反，更好的属性是 rel .

    那么，我就是这样做的 . 我会将 title 属性更改为 rel ，然后使用图像 Headers 添加 title 属性 .

    <div id="gallery">
  <ul class="thumb">
    <li><a href="images/childrentxt.png"><img src="images/buttons/kids.png"
         rel="children.htm" title="Name of image 1" /></a></li>
    <li><a href="images/martialartstxt.png"><img src="images/buttons/dee.png"
         rel="mma.htm" title="Name of image 2" /></a></li>   
    <li><a href="images/cardiotxt.png"><img src="images/buttons/cardio.png"
         rel="fitness.htm" title="Name of image 3" /></a></li>
    <li><a href="images/combattxt.png"><img src="images/buttons/tristan.png"
         rel="combat.htm" title="Name of image 4" /></a></li>
  </ul>
</div>

<div id="main_view">
    <a href="fitness.htm" title="Mixed Martial Arts" target="_self">
    <img src="images/maintxt.png" alt="" /></a>
</div>

    现在JS：

    $("ul.thumb li a").click(function() {
    var mainImage = $(this).attr("href"); // Find Image URL
    var imgLink = $(this).children('img').attr('rel'); // Find the image link in rel
    var imgTitle = $(this).children('img').attr('title'); // Find the image title
    $("#main_view").html('<a href="' + imgLink + '" title="' + imgTitle + '" target="_self"><img src="' + mainImage + '" alt="" /></a>');
    return false;
});

    因此，我只是填充整个 #main_view div，而不仅仅是更改img src . 我还从图像标签中抓取了图像 Headers .

    我没有测试过这个，但它应该可以工作 .

    回复于
  • 0
    $("ul.thumb li a").click(function() {
    $("#main_view img").attr('src', $(this).attr("href"));
    return false;
   });

    或完全摆脱a href并将点击与图像联系起来

    $("ul.thumb li img").click(function() {
    $("#main_view img").attr('src', $(this).attr("title"));
    return false;
   });
    回复于

相关问题