Mehrere Inhalte in divs von mehreren Schaltflächen ein-/ausblenden

Question

Ich habe 5 verschiedene Bilder, die als Schaltflächen funktionieren sollten, jede dieser Schaltflächen sollte den Inhalt in einem div auslösen. Ich würde gerne einen Standard-Inhalt im div haben, wenn die Seite geladen wird, aber ersetzt wird durch welche Taste gedrückt wird, sollte der Inhalt der gedrückten Taste ersetzt werden, wenn ich auf eine andere Schaltfläche klicke.

Das ist, was ich jetzt habe.

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: Ich habe nicht die JQuery-Tag zunächst auf die Frage bemerken. Hier ist eine aktualisierte Antwort, die das verwendet.

Verwenden Sie keine Hyperlinks, wenn Sie nirgendwo navigieren. Es ist semantisch inkorrekt und irritiert den Browserverlauf unnötig. Sie können stattdessen Ihre Bilder in das button Element einfügen oder einfach click Event-Handler zu den Bildern hinzufügen, was ich unten zeige.

Auch, wenn Sie den Inhalt in einem Array von Objekten speichern, können Sie beseitigen 5 separate div Strukturen zu schaffen, die und in der Lage sein, nur ein einziges Update:

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