Innerhtml in einer ordentlichen Art und Weise

Question

Ich benutze HTML und Js, und ich möchte ein Stück HTML-Code anzeigen, wenn der Benutzer etwas klickt. Der Code ist ein bisschen groß, so dass document.getElementById("display").innerHTML = nicht attraktiv ist. Ich habe gegoogelt und von IFrame erfahren, aber ich möchte Scrollbars und ähnliches vermeiden, ich hoffte, ich könnte ein einfaches Div verwenden, wie kann ich das tun? Ich benutze jquery auch, ich weiß über die Funktion hide() in jquery, aber die Sache im div mit ID-Anzeige sollte sich dynamisch ändern, wenn also der Benutzer auf item1 klickt sollte er text1 bekommen, item2 sollte text2 bekommen und ich will für textx

Answer 1

einen bestimmten Ort haben, Es klingt wie Sie mit für so etwas wie

$('.ShowLink').click(function() { 
    $('#' + this.rel).toggle(); 
    return false; 
}); 

Dies wird das Element mit der ID wechseln angegeben durch das rel= Attribut jedes Elements nun das ShowLink Klasse.
Zum Beispiel:

<a href="#" rel="Text1" class="ShowLink">Show something</a> 
... 
<div id="Text1"> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
</div> 

Answer 2

innerHTML- Methode ist wahrscheinlich weise leistungs am besten. Wenn Sie keinen zusätzlichen Inhalt abrufen (z. B. durch AJAX-Aufrufe), setzen Sie alle Blöcke im Voraus in separate divs und setzen Sie ihr css-Attribut "display" auf "none". Dann können Sie die Attributänderung für ein bestimmtes div mit einem Ereignis, das an eine Schaltfläche oder Verknüpfung geknüpft ist, "blockieren".

Answer 3

Dies könnte getan werden, indem mehrere divs absolut übereinander positioniert werden und dann die entsprechenden basierend auf Benutzereingaben angezeigt/verborgen werden. Auf diese Weise müssen Sie den Inhalt der Elemente nicht manipulieren, sondern nur ein-/ausblenden. Der Trick besteht darin, die Elemente absolut zu positionieren. Wenn Sie dies tun, möchten Sie möglicherweise die letzte div in der Liste statisch positioniert (vorausgesetzt, sie werden alle die gleiche Größe haben), so dass der Rest der Seite um diese Elemente entsprechend fließt. Alternativ können Sie alle diese Elemente in ein anderes div platzieren, das statisch positioniert ist und den Platz für die absolut positionierten Elemente reserviert.