Willkommen in der Webstatt Zum Webstatt Blog und Stories
nuit nuit am 28.01.07 21:17

Stylechanger v.0.1

angenommen man hat sowas:
<ul id="parentid">
<li>Hallo</li>
<li>Nochwas</li>
<li>Und Nochwas</li>
</ul>

und das will man jetzt nicht untereinander, sondern nebeneinander darstellen, das geht ja mit display:inline;
aber angenommen, man möchte dies nun dynamisch machen :D d.h. der User kann auf einen link klicken und dann wird es horizontal angezeigt und dann klickt er auf einen anderen, und dann ändert das wieder.
<script type="text/javascript">
function displayChange(parentid,display) {
names = document.getElementsByTagName('li');
for(i = 0; i < names.length; i++) {
//alert(names[i].parentNode.id);
if(names[i].parentNode.id == parentid) {
names[i].style.display=display;
}
}
}
</script>
<ul id="parentid">
<li>Test</li>
<li>och ein Test</li>
</ul>

<a onclick="displayChange('parentid','inline');" href="#">Zu
einer Zeile</a>
<a onclick="displayChange('parentid','list-item');" href="#">Zu Block element</a>


Demo: http://scripts.moonsword.info/homes/guest/JavaScript/displayChange.html

wie man das ganze benutzt sollte klar sein:
displayChange(<parentid>,<new display>)

netcup.de Warum gibt es hier Werbung?
Creative Commons Lizenzvertrag
Alle Inhalte des Webstatt-Archivs stehen unter einer Creative Commons Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported Lizenz.

Impressum & Kontakt