Javascript Trick “getElementByClass” - versteckter Content für Sumas direkt sichtbar
Stell dir einen Artikel vor. Darunter sind Fragen zum Artikel und zu jeder Frage gibt es viele Antworten. Nun möchte der Webmaster die Antworten erstmal ausblenden, damit der Besucher einfach durch die Fragen scannen kann. Mit Javascript kann sich der Besucher die Antworten zu den Fragen anzeigen lassen, die ihn interessieren. Das ist alles kein Problem, man kann ja mit
style="display: none";
alles schön ausblenden und dann mit
function anzeigen()
{
document.getElementById('elementid').style.display = 'block';
}
<a href="#" onclick="anzeigen()">anzeigen</a>
das benötigte wieder einblenden. Einen Haken hat die Sache allerdings, versteckte Bereiche (also alles was mittels CSS und mit “display: none” versteckt wird) kommen den Suchmaschinen “komisch” vor. Damit der Content in den versteckten Bereichen auch gewertet wird, sollte man eine andere Strategie wählen.
Erst alles anzeigen, dann verstecken
Als erstes werden alle Inhalte vollständig angezeigt. Danach nutzt man das “onload”-Ereignis im body Tag der Website um eine Funktion aufzurufen, die alle Inhalte versteckt, die der Besucher erstmal nicht sehen soll (wegen der Usability).
function start()
{
document.getElementById('elementid').style.display = 'none';
}
<body onload="start()">
Zusatz:
Javascript gibt uns als Entwicklern die Möglichkeit auf Elemente mittels den folgenden drei Strukturen zuzugreifen:
- getElementById
- getElementsByName
- getElementsByTagName
Was aber eigentlich immer fehlt ist eine Funktion im Sinne von: getElementsByClass. Im Digitalpoint Forum hab ich jetzt eine tolle Lösung gefunden:
function verstecke() {
var allElems = document.getElementsByTagName('*');
for (var i = 0; i < allElems.length; i++) {
var thisElem = allElems[i];
if (thisElem.className && thisElem.className == 'antworten') {
thisElem.style.display = 'none';
}
}
}
function anzeigen(elementid)
{
document.getElementById(elementid).style.display = 'block';
}
<body onload="verstecke()">
<a href="#" onclick="anzeigen('antworten_block_1')">anzeigen</a>
<ul class="antworten" id="antworten_block_1">
<li>Antwort 1</li>
<li>Antwort 2</li>
<li>Antwort 3</li>
</ul>
<a href="#" onclick="anzeigen('antworten_block_2')">anzeigen</a>
<ul class="antworten" id="antworten_block_2">
<li>Antwort 1</li>
<li>Antwort 2</li>
<li>Antwort 3</li>
</ul>
Sorry für die unleserliche Formatierung
Verwandte Artikel
- Verrücktes Javascript
- Schneller mit Css arbeiten - ein kleiner Trick
- Ein kleiner Schritt für den Coder, ein großer Schritt für die Usability
- Schonmal Content mit CSS erstellt?
- HowTo: Traffic von Yahoo Answers
- Pingback: Webmaster Weblog » ActiveX Controls always on top. Hiding Elements with getElementsByClass. on Mai 4, 2008
5 Kommentare
Tut mir leid, die Kommentarfunktion für diesen Beitrag ist geschlossen.
Wirklich raffiniert.
Schau Dir doch mal bei Gelegenheit die Selectoren von JQuery an. Die Klasse ist zwar nicht gerade leichtgewichtig kann aber eine Menge Aufgaben erfüllen und über die Selektoren lassen sich auch Klassen auswählen.
Danke für den Link, ich werds mir mal anschauen. Ähnliches geht, soweit ich weiß, auch mit Prototype, aber ich wollte mal eine Lösung zeigen, die ohne die Kraftpakete auskommt :)
Ein kleiner Copy&Paste-Fehler ist da wohl noch unterlaufen:
In der JavaScript-Funktion start() müsste
document.getElementById(’elementid’).style.display = ‘none’; (statt “block”) stehen.
Viele Grüße
Martin
Ja du hast, der Fehler ist nun korrigiert, danke :)
Hallo,
ich habe das ganze mal getestet und wollte es dann mal nickt mit Display sondern mit innerHTMl machen.
var Neu = “Werbung Werbung werbung werbung werbung”;
alert(thisElem.innerHTML);
thisElem.innerHTML = Neu;
Im Firefox macht er das auch ohne Probleme aber der IE 6.0 macht da so seine Probleme und ich kann mir nicht erklären wo dran es liegen könnte.
Der Alert zeigt mir übrigens alles korrekt an.
Ansonsten echt super leichtes Script! Danke.