使用JS切換顯示/隱藏

我對JS很陌生，而且我很難讓我的代碼完全按照我想要的方式工作。（看JSFiddle https://jsfiddle.net/ey02227z/3/）使用JS切換顯示/隱藏

我有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>

來源

2016-03-28 J.Hope

哪裏是你的JavaScript？ – j08691

@Justin如果能解決您的問題，請將我的回覆標爲答案，否則請提供更多信息以便我們爲您提供幫助。 – smaili

這可能會解決您的問題。試試看

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"); 
    } 

});

來源

2016-03-28 08:30:10 prashant

這完美的作品謝謝你！我唯一的另一個問題是，我必須添加什麼JS才能讓它如此，如果點擊了相同的鏈接，它又隱藏了隱藏的內容？（點擊圖片1，隱藏內容1被顯示，當圖片1被點擊時，它會再次隱藏隱藏內容1） –

檢查上面的代碼如果再次單擊相同的圖片，我添加了js來切換。 – prashant

這裏有一個出發點：

// listen to clicks from any of the links 
$('#ImgContainer a').on('click', function(e) { 
    e.preventDefault(); // not necessary in this case but good practice 

    var link = $(this); // the link that was clicked 
    var index = link.index(); // its index position 

    $('#HiddenContentContainer div').addClass('Hidden'); // reset all to hidden 
    $('#Hidden' + (index + 1)).removeClass('Hidden'); // remove the hidden associated with this clicked link 
});

包括註釋，以幫助您更好地瞭解每一行做什麼。

來源

2016-03-28 02:51:46 smaili

您應該添加到JSFIDDLE，這將有助於OP更快地得出結論。並幫助其他人提高你的正確答案。 –

使用JS切換顯示/隱藏

回答

相關問題