如何使用jquery或javascript在缩略图上隐藏和显示图像单击

我正在尝试使用javascript/jquery

我有下面的HTML，我想在“onclick”的图像链接事件的工作

<div id="galleryContainer">
    <ul class="galleryThumbnails">
        <li><a href="/99/english/destinations_offers/destinations/asiapacific/india/newdelhi/photo.aspx?item=media_616165_ID0EV&amp;menu=image_616165#mplayer_616165">
            <img width="70" height="56" src="http://corp.com/99/english/images/thumb_616143_tcm481-616166.jpg"
                class="mpMenuItemSelected" id="thumb_616165_ID0EV" title="New Delhi Zoo" alt="New Delhi Zoo"></a>
        </li>
        <li><a href="/99/english/destinations_offers/destinations/asiapacific/india/newdelhi/photo.aspx?item=media_616165_ID0E3&amp;menu=image_616165#mplayer_616165">
            <img width="70" height="56" src="http://corp.com/99/english/images/thumb_616146_tcm481-616168.jpg"
                class="mpMenuItemOff" id="thumb_616165_ID0E3" title="New Delhi Zoo" alt="New Delhi Zoo"></a>
        </li>
        <li><a href="/99/english/destinations_offers/destinations/asiapacific/india/newdelhi/photo.aspx?item=media_616165_ID0EDB&amp;menu=image_616165#mplayer_616165">
            <img width="70" height="56" src="http://corp.com/99/english/images/redfort_tcm481-616158.jpg"
                class="mpMenuItemOff" id="thumb_616165_ID0EDB" title="New Delhi RedFort" alt="New Delhi RedFort"></a>
        </li>
    </ul>       
        <div id="media_616165_ID0EV" class="galleryImage">
        <img width="390" height="312" alt="New Delhi Zoo" title="New Delhi Zoo" src="http://corp.com/99/english/images/10894_tcm481-616143.jpg"></div>

    <div style="display: none;" id="media_616165_ID0E3" class="galleryImage">
        <img width="390" height="312" alt="New Delhi Zoo" title="New Delhi Zoo" src="http://corp.com/99/english/images/deer_tcm481-616146.jpg"></div>

    <div style="display: none;" id="media_616165_ID0EDB" class="galleryImage">
        <img width="390" height="312" alt="New Delhi RedFort" title="New Delhi RedFort" src="http://corp.com/99/english/images/redfort_tcm481-616157.jpg"></div>        
</div>  

在上面的HTML中，我得到了缩略图（请参见UL）

<img width="70" height="56" src="http://corp.com/99/english/images/thumb_616143_tcm481-616166.jpg"
                class="mpMenuItemSelected" id="thumb_616165_ID0EV" title="New Delhi Zoo" alt="New Delhi Zoo">

现在，我已经为每个缩略图创建了单独的galleryImage div部分，它将显示在单击缩略图图像上。例如，上面的缩略图有

    <div id="media_616165_ID0EV" class="galleryImage">
<img width="390" height="312" alt="New Delhi Zoo" title="New Delhi Zoo" src="http://corp.com/99/english/images/10894_tcm481-616143.jpg"></div>

我想根据单击的缩略图隐藏和显示图像

编辑：

当第一次呈现页面时，我将选项卡功能作为链接，下面的@Rahul代码工作得很好，但是在导航任意选项卡并再次返回后，它停止工作，原因是在返回同一选项卡后，我以前的jquery代码添加了具有相同内容的额外div，下面是jquery，因为我的页面现在将有两次相同的代码。请参阅第一次呈现页面时的示例代码

<div class="tabs-container" id="tab-container">
top above html is rendered here
</div>

上面的html在这里呈现

现在，在导航到其他选项卡并返回到同一选项卡后，现在页面上的html如下所示，上面提到的代码仍保留在页面中，并带有style=“display:none；”添加了一个额外的div以播放选项卡功能：

<div class="tabs-container" id="tab-container" style="display: none;">
top above html is rendered here
</div>
<div id="divContenttab5" style="display: block;" class="dynDiv">
  <div class="tabs-container" id="tab-container">
      top above html is rendered here
</div>
</div>

上面的html在这里呈现
上面的html在这里呈现

现在，下面的Jquery停止工作，因为存在两种相同类型的HTML

请建议

谢谢

致以最良好的祝愿， MKS

试试这个

$("#galleryContainer ul.galleryThumbnails li img").click(function(){
    var idArr = this.id.split('_');
    var divID = "media_" + idArr[1] + "_" + idArr[2];

    $("div.galleryImage").hide();

    $("#" + divID).show();
});

如果您的HTML元素是动态生成的，那么您可以使用这个使用事件的代码

试试这个

$("#galleryContainer ul.galleryThumbnails li img").click(function(){
    var idArr = this.id.split('_');
    var divID = "media_" + idArr[1] + "_" + idArr[2];

    $("div.galleryImage").hide();

    $("#" + divID).show();
});

如果您的HTML元素是动态生成的，那么您可以使用这个使用事件的代码

---

生成HTML时，可以很容易地将

onclick=“myFunction（'media_616165_ID0EV'）”

添加到缩略图中

myFunction(media_id){
 $(media_id).show();
}

---

生成HTML时，可以很容易地将

onclick=“myFunction（'media_616165_ID0EV'）”

添加到缩略图中

myFunction(media_id){
 $(media_id).show();
}

---

我用CSS类切换解决了我的问题，我更改了@Rahul给出的代码，请看一看并提出任何更改建议

$("#galleryContainer ul.galleryThumbnails li img").click(function () {
    var idArr = this.id.split('_');
    var divID = "media_" + idArr[1] + "_" + idArr[2];
    $("#galleryContainer ul.galleryThumbnails li img").each(function () {
        if ($(this).is('.mpMenuItemSelected')) {
            $(this).removeClass('mpMenuItemSelected');
            $(this).addClass('mpMenuItemOff');
        }
    });
    $("div.galleryImage").hide();
    $("#" + divID).show();
});

---

我用CSS类切换解决了我的问题，我更改了@Rahul给出的代码，请看一看并提出任何更改建议

$("#galleryContainer ul.galleryThumbnails li img").click(function () {
    var idArr = this.id.split('_');
    var divID = "media_" + idArr[1] + "_" + idArr[2];
    $("#galleryContainer ul.galleryThumbnails li img").each(function () {
        if ($(this).is('.mpMenuItemSelected')) {
            $(this).removeClass('mpMenuItemSelected');
            $(this).addClass('mpMenuItemOff');
        }
    });
    $("div.galleryImage").hide();
    $("#" + divID).show();
});

---

---

非常感谢Rahul，但我的问题稍微复杂一点，我有标签作为链接，当第一次加载页面时，上面的代码工作正常，但在导航任何标签并返回到同一标签后，它停止工作。我知道由于我的标签功能，它不起作用，我正在编辑我的问题，请看一看并提出建议！您好，Rahul，请检查上面编辑的代码，如果您看到我在图像标记中有一个名为“mpMenuItemSelected”和“mpMenuItemOff”的类，它在单击事件时被切换，请建议在使用LIVE之后仍然不起作用。是否有关于切换img标记中的类的建议？对于切换类，您可以使用

.toggleClass（）

method非常感谢Rahul，但我的问题稍微复杂一点，我将选项卡作为链接，当第一次加载页面时，上面的代码工作正常，但在导航任何选项卡并返回到同一选项卡后，它停止工作。我知道由于我的标签功能，它不起作用，我正在编辑我的问题，请看一看并提出建议！您好，Rahul，请检查上面编辑的代码，如果您看到我在图像标记中有一个名为“mpMenuItemSelected”和“mpMenuItemOff”的类，它在单击事件时被切换，请建议在使用LIVE之后仍然不起作用。是否有关于切换img标记中的类的建议？对于切换类，您可以使用

.toggleClass（）

methodDO检查元素ID是否重复。@Rahul我如何检查元素ID的重复，因为这是代码的一部分。请建议切换图像标记的类。在一个文档中，可以有多个具有相同id的元素。这将是无效的，已修复。您能建议我如何切换上面示例中imageDO的类吗？请检查元素ID是否重复。@Rahul我如何检查元素ID的重复，因为这是代码的一部分。请建议切换图像标记的类。在一个文档中，可以有多个具有相同id的元素。这将是无效的，已修复。您可以建议我如何切换上面示例中的类吗？谢谢您可以建议我们如何在上面的图像标记中使用CSS切换谢谢您可以建议我们如何在上面的图像标记中使用CSS切换吗