Änderung Zellinhalt auf Klick angezeigt - Javascript

Question

existiert es eine Bibliothek oder einen Funktionssatz, der tut das following_

Discalimer: wenn die Seite geladen wird, den gesamten Inhalt „unter“ A bis E soll geladen werden und dann will ich einfach nach einer Änderung anzeigen (auf Knopfdruck). Ich denke, dass dies in Javascript getan wird, aber ich bin zu grün, um mit dieser Komplexität umzugehen, und suche daher Rat für erfahrenere Benutzer.

Answer 1

Sie können mit Jquery wie in einem Kommentar erwähnt verwenden.
https://jqueryui.com/tabs/

Oder Sie können eine Front-End Rahmen bei Verwendung wie Bootstrap aussehen http://getbootstrap.com/javascript/#tabs

Answer 2

Versuchen Sie folgendes:

$(document).ready(function() { 
 
    
 
    $("li").on("click",function(){ 
 

 
    $("li").removeClass("clicked"); 
 

 
    $(this).addClass("clicked"); 
 

 
    $(".content").text("This is : " + $(this).text()); 
 
    
 
    }) 
 
    
 
})

li { 
 
    display: inline-block; 
 
    width: 60px; 
 
    padding: 5px; 
 
    text-align: center; 
 
    position: relative; 
 
    top: 3px; 
 
    left: 20px; 
 
    cursor: pointer; 
 
} 
 
.content { 
 
    border: 3px solid skyblue; 
 
    height: 200px; 
 
    width: 460px; 
 
    text-align: center; 
 
    line-height: 200px; 
 
} 
 
.clicked { 
 
    border:3px solid skyblue; 
 
    border-bottom: 4px solid #fff; 
 
}

<ul> 
 
    <li class="clicked">A</li> 
 
    <li>B</li> 
 
    <li>C</li> 
 
    <li>D</li> 
 
    <li>E</li> 
 
    <div class="content"></div> 
 
</ul> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>