通过多个按钮在div中显示/隐藏多个不同的内容

Question

I have 5 different images that should work as buttons, each of these buttons should trigger the content in a div. I would like to have a default content in the div when the page loads but is replaced by whatever button is pressed, the content from the pressed button should be replaced when i click another button.

This is what i've got now.

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

UPDATE : I didn't notice the JQuery tag on the question at first. Here's an updated answer that uses that.

Don't use hyperlinks when you aren't navigating anywhere. It's semantically incorrect and unnecessarily messes with the browser history. You can, instead place your images inside of the button element or just add click event handlers to the images themselves, which is what I'm showing below.

Also, if you store the content in an array of objects, you can eliminate having to create 5 separate div structures and be able to just update a single one:

 // 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>