javascript - 使用 JS 切换显示/隐藏

Question

我是 JS 的新手，我很难让我的代码完全按照我想要的方式工作。(参见 JSFiddle https://jsfiddle.net/ey02227z/3/)

我有 3 张图片，我希望能够单击一张图片并让它显示一个隐藏的 div，然后当单击下一张图片时，我希望它隐藏第一个 div 并显示下一个。

(点击图片1可以看到HiddenContent1，点击图片2，隐藏HiddenContent1，显示HiddenContent2等)

这是我的代码:

(我没有包含任何 JS，因为老实说，我不知道从哪里开始。)

提前致谢!

#ImgContainer{
    text-align:center;
}

.Hidden{
    display:none;
}

.image:hover{
    border: 1px solid purple;
}

#HiddenContentContainer{
    text-align: center;
    min-height:50px;
    min-width:100%;
    border: 1px solid teal;
}

<div id="MainContainer">
    <div id="ImgContainer">
        <a href="#"><img id="image1" class="image" src="http://placehold.it/150" onmouseover="this.src='http://placehold.it/150?text=Image+1';" onmouseout="this.src='http://placehold.it/150';" /></a>
        <a href="#"><img id="image2" class="image" src="http://placehold.it/150" onmouseover="this.src='http://placehold.it/150?text=Image+2';" onmouseout="this.src='http://placehold.it/150';" /></a>
        <a href="#"><img id="image3" class="image" src="http://placehold.it/150" onmouseover="this.src='http://placehold.it/150?text=Image+3';" onmouseout="this.src='http://placehold.it/150';" /></a>
    </div>
    <div id="HiddenContentContainer">
    <h3>HIDDEN CONTENT SHOULD APPEAR HERE</h3>
        <div id="Hidden1" class="Hidden">This is My Hidden Content for Image 1</div>
        <div id="Hidden2" class="Hidden">This is My Hidden Content for Image 2</div>
        <div id="Hidden3" class="Hidden">This is My Hidden Content for Image 3</div>
    </div>
</div>

Answer 1

这可能会解决您的问题。试试吧

HTML

<div id="MainContainer">
<div id="ImgContainer">
    <a href="#"><img id="image1" class="image" data-target="#Hidden1" src="http://placehold.it/150" onmouseover="this.src='http://placehold.it/150?text=Image+1';" onmouseout="this.src='http://placehold.it/150';" /></a>
    <a href="#"><img id="image2" class="image" data-target="#Hidden2" src="http://placehold.it/150" onmouseover="this.src='http://placehold.it/150?text=Image+2';" onmouseout="this.src='http://placehold.it/150';" /></a>
    <a href="#"><img id="image3" class="image" data-target="#Hidden3" src="http://placehold.it/150" onmouseover="this.src='http://placehold.it/150?text=Image+3';" onmouseout="this.src='http://placehold.it/150';" /></a>
</div>
<div id="HiddenContentContainer">
    <h3>HIDDEN CONTENT SHOULD APPEAR HERE</h3>
    <div id="Hidden1" class="Hidden">This is My Hidden Content for Image 1</div>
    <div id="Hidden2" class="Hidden">This is My Hidden Content for Image 2</div>
    <div id="Hidden3" class="Hidden">This is My Hidden Content for Image 3</div>
</div>

JS:

//Normal hide-show
$(".image").click(function(){
$(".Hidden").hide();
    $($(this).attr("data-target")).show();
});

//For Toggle same code
$(".image").click(function(){
$(".Hidden").hide();
    if(!$($(this).attr("data-target")).hasClass("current")){
    $($(this).attr("data-target")).show().addClass("current");
  }
  else{
    $($(this).attr("data-target")).removeClass("current");
  }

});