JavaScript: Listenpunkt (li) ein- und ausblenden

    Hi zusammen :)

    Folgendes. Ich habe eine Liste <ul> mit mehreren Einzelwerten <li> und Inputfelder vom Typ "Button". Nun möchte ich, dass je nach Auswahl des Buttons ein bestimmtes <li> eingeblendet wird und andere ausgeblendet werden.

    Genauer gesagt also drei "button" und drei "li".
    Wählt man Button 1, dann soll LI 1 erscheinen und LI 2-3 auf "display: none;"

    So, soweit kein Problem, das funktioniert eigentlich auch, doch die Darstellung ist falsch. Bei diesen Listenpunkten fehlt nun immer der Listenpunkt davor. Ohne das JavaScript sind die Punkte da, mit nicht.

    Ist auch egal, ob ich dann auf "display: block" oder "display: inline" gehe, die Listenpunkte bleiben verschwunden.

    Hat einer eine Idee, warum das so ist?

    Wenn ein Mensch nicht um dich kämpft, hat er nur gewartet, dass du gehst. ;(

    Äm ja, das geht, dann ist der aber nicht da wo die anderen sind, sondern beginnt an der Stelle des Textes ;) Ich bin aber schon mal so weit, dass das definitiv an dem "display" liegt. Ohne geht es auch mit JS, nehme ich "visible" geht es auch. Nur "visible: hidden;" kann ich nicht nehmen, da die "leeren" Listenpunkte dann ja da bleiben - schaut blöd aus.

    Wenn ein Mensch nicht um dich kämpft, hat er nur gewartet, dass du gehst. ;(

    Hm, also nun habe ich einen Weg, aber ob der überall funktioniert, keine Ahnung. Wenn ich die Listenpunkte damit ausblende:

    Code
    document.getElementById('preisinfo_1').style.display = 'none';


    und damit wieder einblende (bzw. das "none" quasi zurücksetze)

    Code
    document.getElementById('preisinfo_1').style.display = '';


    , dann habe ich auch meinen "Listenpunkt" davor wieder.

    Nur, ist dieses "style.display = '';" von der Syntax her korrekt? Kenne da eigentlich nur, inline, block oder eben gar kein "display", aber ein leeres "display" ist mir neu.

    Wenn ein Mensch nicht um dich kämpft, hat er nur gewartet, dass du gehst. ;(

    Zitat von Margin;14060

    Ist mir auch neu, haste mal "display: list-item" probiert?
    Javascript is leider nich meine Baustelle ^^

    Nee, nix andere Baustelle, das war es! Ich hab mich da auch auf JS versteift und es ist CSS. "list-item", genau das ist es

    Zitat

    Sichtbar. Das Element erzeugt einen Absatz und hat ein Aufzählungszeichen.

    ^^ das ist nämlich für meinen Kundenbereich ;) Überflüssige Hinweise raus, kürzer und kompakter. Ohne JS soll aber alles zu sehen sein wie bisher auch, sonst hätte ich das gleich mit TextNode bzw. AppendChild / InsertBevor gemacht ;)

    Danke!

    Wenn ein Mensch nicht um dich kämpft, hat er nur gewartet, dass du gehst. ;(

    Ansonsten, als Nachsatz für zukünftige JS/CSS Spielereien: display=""; als Gegensatz von display="none"; ist die richtige Arbeitsweise, um die Crossbrowser Problematik bei bei display zu umgehen. Also immer mit display=""; zum einblenden unter JS arbeiten.