Erich: DIVs ein und ausblenden

SELF-Forum

DIVs ein und ausblenden

Erich
– Informationen zu den Bewertungsregeln

Hallo zusammen.

Ich habe eine kleine HTML-Seite wo 5 Links in einer Tabelle drin sind. Neben der Tabelle sind 5 DIVs aufeinander. Je nach dem welchen Link der Besucher drückt soll nun einfach immer eines der DIVs angezeigt werden.
Die anderen sollen unsichtbar sein (display:block).

Ich vermute das macht man zusammen mit JavaScript, dass man dort einfach per Klick die 4 nicht erwünschten DIVs auf display:none setzt und das andere aktiviert.

Aber wie mache ich das?

Danke und Gruss,
Erich

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. DIVs ein und ausblenden

    Christian
    – Informationen zu den Bewertungsregeln

    Aber wie mache ich das?

    Zuerst solltest du jeder Box eine eindeutige id geben, damit du sie gezielt ansprechen kannst. Im JS erstellst du eine globale Variable mit der Box, die gerade angezeigt wird (kann am Anfang leer sein, wenn keine Box angezeigt wird) und schreibst eine JS-Funktion, die als Parameter die id der anzuzeigenden Box übergeben bekommt. In der Funktion wird die aktuelle Box (falls vorhanden) <http://de.selfhtml.org/javascript/objekte/style.htm@title=verborgen und die neue angezeigt>. Das Klick-Event selbst kannst du über den parameter http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onclick@title=onClick im Link auslösen. Ggf. solltest du noch ein return false; hinter den eigentlichen Funktionsaufruf setzen, damit der Browser dem Link nicht folgt.

    Christian

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. DIVs ein und ausblenden

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    @@Erich:

    nuqneH

    Ich habe eine kleine HTML-Seite wo 5 Links in einer Tabelle drin sind.

    Was sollen die in einer Tabelle? Ein Menü ist eine Liste ist eine Liste.

    Ich vermute das macht man zusammen mit JavaScript

    Für fähige Browser benötigt man dafür keinerlei JavaScript, die ':target'-Pseudoklasse tut es:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">  
  <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
    <title>Allgemeine Erklärung der Menschenrechte</title>  
    <link rel="stylesheet" type="text/css" href="stylesheet.css"/>  
  </head>  
  <body>  
    <h1>Allgemeine Erklärung der Menschenrechte</h1>  
    <ol>  
      <li><a href="#artikel1">Artikel 1</a></li>  
      <li><a href="#artikel2">Artikel 2</a></li>  
      <li><a href="#artikel3">Artikel 3</a></li>  
      <li><a href="#artikel4">Artikel 4</a></li>  
      <li><a href="#artikel5">Artikel 5</a></li>  
    </ol>  
  
    <div id="artikel1">  
      <h2>Artikel 1</h2>  
      <p>Alle Menschen sind  frei und gleich an Würde und Rechten geboren. Sie sind mit Vernunft und  Gewissen begabt und sollen einander im Geiste der Brüderlichkeit begegnen.</p>  
    </div>  
  
    <div id="artikel2">  
      <h2>Artikel 2</h2>  
      <p>Jeder hat Anspruch  auf alle in dieser Erklärung verkündeten Rechte und Freiheiten, ohne  irgendeinen Unterschied, etwa nach Rasse, Hautfarbe, Geschlecht, Sprache,  Religion, politischer oder sonstiger Anschauung, nationaler oder sozialer  Herkunft, Vermögen, Geburt oder sonstigem Stand.</p>  
      <p>Des weiteren darf  kein Unterschied gemacht werden auf Grund der politischen, rechtlichen oder  internationalen Stellung des Landes oder Gebietes, dem eine Person angehört,  gleichgültig ob dieses unabhängig ist, unter Treuhandschaft steht, keine  Selbstregierung besitzt oder sonst in seiner Souveränität eingeschränkt ist.</p>  
    </div>  
  
    <div id="artikel3">  
      <h2>Artikel 3</h2>  
      <p>Jeder hat das  Recht auf Leben, Freiheit und Sicherheit der Person.</p>  
    </div>  
  
    <div id="artikel4">  
      <h2>Artikel 4</h2>  
      <p>Niemand darf in  Sklaverei oder Leibeigenschaft gehalten werden; Sklaverei und Sklavenhandel in  allen ihren Formen sind verboten.</p>  
    </div>  
  
    <div id="artikel5">  
      <h2>Artikel 5</h2>  
      <p>Niemand darf der  Folter oder grausamer, unmenschlicher oder erniedrigender Behandlung oder  Strafe unterworfen werden.</p>  
    </div>  
  </body>  
</html>

    stylesheet.css:

    ol  
{  
	list-style: none;  
}  
  
div  
{  
	display: none;  
}  
  
div:target  
{  
	display: block;  
}

    Wenn IE 6 noch irgendeine Rolle spielt, kann man für den (und nur für den) mit JavaScript (evtl. mittels CSS-Expressions) nachhelfen.

    Qapla'

    --
    Bildung lässt sich nicht downloaden. (Günther Jauch)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. DIVs ein und ausblenden

      Hans
      – Informationen zu den Bewertungsregeln

      Hi Gunnar,

      Wenn IE 6 noch irgendeine Rolle spielt, kann man für den (und nur für den) mit JavaScript (evtl. mittels CSS-Expressions) nachhelfen.

      da er immer eine grosse Rolle spielt, sollte man in diesem Fall vielleicht gleich auf die ganze browserspezifische Trennung verzichten und stattdessen ein kleines Javascript nutzen, was solide funktioniert. Zumindest meine Meinung.

      Hans

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. DIVs ein und ausblenden

        Gunnar Bittersmann Homepage des Autors
        – Informationen zu den Bewertungsregeln

        @@Hans:

        nuqneH

        da er immer eine grosse Rolle spielt, sollte man in diesem Fall vielleicht gleich auf die ganze browserspezifische Trennung verzichten und stattdessen ein kleines Javascript nutzen, was solide funktioniert.

        Das tut KEIN JavaScript. JavaScript funktioniert nur, wenn der Nutzer es will. Und die Anzahl der Nutzer, die mit einem vernünftigen Browser unterwegs sind und JavaScript deaktiviert haben, dürfte (je nach Zielgruppe) durchaus die Anzahl der IE-6-Nutzer übersteigen.

        Man sollte Nutzer vernünftiger Browser mit deaktiviertem JavaScript nicht ausschließen. Deshalb:
        1. JavaScript-frei Lösung.
        2. bei Bedaft dem IE 6 mit JavaScript nachhelfen

        Qapla'

        --
        Bildung lässt sich nicht downloaden. (Günther Jauch)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. DIVs ein und ausblenden

          Hans
          – Informationen zu den Bewertungsregeln

          Hi Gunnar,

          nuqneH

          ich habe mich immer schon gefragt welche Sorten von Menschen, tatsächlich ein Wörterbuch für klingonisch kauft, nun weiss ich es ;-)

          Das tut KEIN JavaScript. JavaScript funktioniert nur, wenn der Nutzer es will. Und die Anzahl der Nutzer, die mit einem vernünftigen Browser unterwegs sind und JavaScript deaktiviert haben, dürfte (je nach Zielgruppe) durchaus die Anzahl der IE-6-Nutzer übersteigen.

          »»

          Diese Zielegruppe, wenn eine solche tatsächlich existent ist, dürfte sich eher in Newsgroup, denn im Netz rumtreiben. Und ist in der Regel bestimmt nicht die gewünschte Besuchergruppe. IE6 liegt nach wie vor auch bei normalen Zielgruppen über 30% oft sogar sehr viel höher.

          Man sollte Nutzer vernünftiger Browser mit deaktiviertem JavaScript nicht ausschließen. Deshalb:

          1. JavaScript-frei Lösung.

          Steht ja nicht im Widerspruch, eine "gutes" Javascript in diesem Fall setzt erst mal alle ausgeblendeten auf display:none. Für NoJS wäre eben alles sichbar.

          1. bei Bedaft dem IE 6 mit JavaScript nachhelfen

          Doppelte Arbeit, und für mein persönliches Empfinden nicht erstrebenswert. Ich habe noch nie eine Trennung der Browser vornehmen müssen, immer wenn ich darüber nachdachte fiel mir eine sinnvolle browserübergreifende Alternative ein.

          Hans

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. DIVs ein und ausblenden

            Gunnar Bittersmann Homepage des Autors
            – Informationen zu den Bewertungsregeln

            @@Hans:

            nuqneH

            ich habe mich immer schon gefragt welche Sorten von Menschen, tatsächlich ein Wörterbuch für klingonisch kauft, nun weiss ich es ;-)

            Nee nee, ich hab mir so’n Ding nicht gekauft. Ich hab’s geschenkt bekommen.

            Diese Zielegruppe, wenn eine solche tatsächlich existent ist, dürfte sich eher in Newsgroup, denn im Netz rumtreiben.

            Dass JavaScript auszuschalten und ggfs. bei ausgewählten Websites zu erlauben keine schlechte Idee ist, dürfte sich mit wachsender Zunahme von digitalem Ungeziefer (und damit sind jetzt nicht Ticker gemeint) immer weiter rumsprechen.

            IE6 liegt nach wie vor auch bei normalen Zielgruppen über 30% oft sogar sehr viel höher.

            Bei den Nutzern des Portals, für das ich arbeite, sind es unter 5%.

            […] eine "gutes" Javascript in diesem Fall setzt erst mal alle ausgeblendeten auf display:none. Für NoJS wäre eben alles sichbar.

            Der Hinweis ist natürlich wichtig.

            »» 2. bei Bedaft dem IE 6 mit JavaScript nachhelfen

            Doppelte Arbeit, und für mein persönliches Empfinden nicht erstrebenswert.

            Ähm, so viel Arbeit ist das ja nun wirklich nicht: Eine Zeile CSS für vernünftige Browser und IE 7, darunter eine Zeile CSS für IE 6.

            Qapla'

            --
            Bildung lässt sich nicht downloaden. (Günther Jauch)
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. DIVs ein und ausblenden

              molily Homepage des Autors
              – Informationen zu den Bewertungsregeln

              IE6 liegt nach wie vor auch bei normalen Zielgruppen über 30% oft sogar sehr viel höher.

              Bei den Nutzern des Portals, für das ich arbeite, sind es unter 5%.

              Handelt es sich bei diesem Portal zufällig um dearie6.com, bringdownie6.com oder iedeathmarch.org? ;)

              Mathias

              --
              JavaScript-Erweiterung für das SELFHTML-Forum
              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

              1. DIVs ein und ausblenden

                Gunnar Bittersmann Homepage des Autors
                – Informationen zu den Bewertungsregeln

                @@molily:

                nuqneH

                Handelt es sich bei diesem Portal zufällig um dearie6.com, bringdownie6.com oder iedeathmarch.org? ;)

                Nee, ie7.com. ;-)

                Qapla'

                --
                Bildung lässt sich nicht downloaden. (Günther Jauch)
                Beitrag melden
                –
                Informationen zu den Bewertungsregeln

    2. DIVs ein und ausblenden

      Christian
      – Informationen zu den Bewertungsregeln

      div:target
      {
      display: block;
      }

        
Schicke Sache. Kannte ich noch nicht. Vielen Dank  
  
Christian
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

    3. DIVs ein und ausblenden

      MudGuard Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Hi,

      Für fähige Browser benötigt man dafür keinerlei JavaScript, die ':target'-Pseudoklasse tut es:
      Wenn IE 6 noch irgendeine Rolle spielt, kann man für den (und nur für den) mit JavaScript [...] nachhelfen.

      IE 7 kann :target? Das wäre mir neu.

      cu,
      Andreas

      --
      Warum nennt sich Andreas hier MudGuard?
      O o ostern ...
      Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

    4. DIVs ein und ausblenden

      MudGuard Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Hi,

      Wenn IE 6 noch irgendeine Rolle spielt,

      kann es sein, daß da eine 6 zu viel im Satz ist?

      Ich seh mit :target im IE 8 keine Wirkung. IE 6 kann's definitiv nicht. Und daß IE 7 es kann, aber IE 8 nicht mehr, halte ich für nicht sehr wahrscheinlich.
      (ich hab keinen IE 7 mehr im Zugriff, kann's also nicht testen)

      cu,
      Andreas

      --
      Warum nennt sich Andreas hier MudGuard?
      O o ostern ...
      Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. DIVs ein und ausblenden

        molily Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Ich seh mit :target im IE 8 keine Wirkung. IE 6 kann's definitiv nicht.

        Offenbar kann kein IE :target.

        (ich hab keinen IE 7 mehr im Zugriff, kann's also nicht testen)

        Wenn du den IE 8 hast, kannst du den in den IE-7-Modus schalten. Ansonsten z.B. IETester.

        Mathias

        --
        JavaScript-Erweiterung für das SELFHTML-Forum
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. DIVs ein und ausblenden

          MudGuard Homepage des Autors
          – Informationen zu den Bewertungsregeln

          Hi,

          Offenbar kann kein IE :target.
          »» (ich hab keinen IE 7 mehr im Zugriff, kann's also nicht testen)
          Wenn du den IE 8 hast, kannst du den in den IE-7-Modus schalten.

          Dazu müßte ich dem IE-7-Modus im IE 8 soweit vertrauen, daß er sich wirklich genau wie ein nativer IE 7 verhält.

          cu,
          Andreas

          --
          Warum nennt sich Andreas hier MudGuard?
          O o ostern ...
          Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

      2. DIVs ein und ausblenden

        Gunnar Bittersmann Homepage des Autors
        – Informationen zu den Bewertungsregeln

        @@MudGuard:

        nuqneH

        6 zu viel

        Alter Sechsmuffel!!1elf

        Qapla'

        --
        Bildung lässt sich nicht downloaden. (Günther Jauch)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln