通過多個按鈕在div中顯示/隱藏多個不同的內容

Question

我有5張不同的圖片應用作按鈕，這些按鈕中的每一個都應觸發div中的內容。 我希望在頁面加載時在div中具有默認內容，但由按下的任何按鈕替換，當我單擊另一個按鈕時，應該替換來自按下的按鈕的內容。

這就是我現在所擁有的。

HTML：

  $('.section-link').click(function() { var cur = $('.section-link').index($(this)); $('.section-display').removeClass('active'); $('.section-display').eq(cur).addClass('active'); }); 

 .section-display:not(.active) { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <a href="#"><img class="button1 section-link" src="button1.jpg" alt=""></a> <a href="#"><img class="button2 section-link" src="button2.jpg" alt=""></a> <a href="#"><img class="button3 section-link" src="button3.jpg" alt=""></a> <a href="#"><img class="button4 section-link" src="button4.jpg" alt=""></a> <a href="#"><img class="button5 section-link" src="button5.jpg" alt=""></a> // Default CONTENT when page loaded <div class="section-display active"> <h2 class="title">Default Ipsum</h2> <h2 class="text">"Lorem ipsum dolor sit amet, consectetur adipiscing elit."</h2> </div> <div class="section-display"> <h2 class="title">First Ipsum</h2> <h2 class="text">"Lorem ipsum dolor sit amet, consectetur adipiscing elit."</h2> </div> <div class="section-display"> <h2 class="title">Second Ipsum</h2> <h2 class="text">"Lorem ipsum dolor sit amet, consectetur adipiscing elit."</h2> </div> <div class="section-display"> <h2 class="title">Third Ipsum</h2> <h2 class="text">"Lorem ipsum dolor sit amet, consectetur adipiscing elit."</h2> </div> <div class="section-display"> <h2 class="title">Fourth Ipsum</h2> <h2 class="text">"Lorem ipsum dolor sit amet, consectetur adipiscing elit."</h2> </div> <div class="section-display"> <h2 class="title">Fifth Ipsum</h2> <h2 class="text">"Lorem ipsum dolor sit amet, consectetur adipiscing elit."</h2> </div> 

Answer 1

更新 ：起初我沒有注意到問題上的JQuery標簽。 這是使用該更新的答案。

當您不在任何地方導航時，請勿使用超鏈接。 從語義上講這是不正確的，並且不必要地弄亂了瀏覽器歷史記錄。 您可以將圖像放置在button元素內部，也可以只將click事件處理程序添加到圖像本身，這就是我在下面顯示的內容。

另外，如果將內容存儲在對象數組中，則可以不必創建5個單獨的div結構，而只需更新一個即可：

 // Put all the images in a JavaScript array var $imgs = $(".section-link"); // If you store your content in an array of objects, you can do this without creating // more than one display div. You'll just get the content from the object in the // array that has the same index as the image (within a different array) var data = [ { title: "Default Ipsum 1", text: "1 Lorem ipsum dolor sit amet, consectetur adipiscing elit." }, { title: "Default Ipsum 2", text: "2 Lorem ipsum dolor sit amet, consectetur adipiscing elit." }, { title: "Default Ipsum 3", text: "3 Lorem ipsum dolor sit amet, consectetur adipiscing elit." }, { title: "Default Ipsum 4", text: "4 Lorem ipsum dolor sit amet, consectetur adipiscing elit." }, { title: "Default Ipsum 5", text: "5 Lorem ipsum dolor sit amet, consectetur adipiscing elit." }, ]; // Get reference to the output area var $outputDiv = $(".section-display"); // Set a click event handler for each of the images $imgs.on("click", function(){ // Find the child elements within the output div that need updating and // extract the content from the array of objects that correspond // to the index of the image that was clicked. $(".title", $outputDiv).text(data[$(this).index()-1].title); $(".text", $outputDiv).text(data[$(this).index()-1].text); }); 

 /* This is only here to make the images visible since they don't actually have valid src paths right now. */ img { display:inline-block; width:50px; height:50px; border:1px solid black; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- See how much simpler the HTML is now? --> <img class="section-link" src="button1.jpg" alt=""> <img class="section-link" src="button2.jpg" alt=""> <img class="section-link" src="button3.jpg" alt=""> <img class="section-link" src="button4.jpg" alt=""> <img class="section-link" src="button5.jpg" alt=""> <div class="section-display active"> <h2 class="title">Default Title</h2> <h2 class="text">Default Content</h2> </div>