Gunnar Bittersmann: DIVs ein und ausblenden

Beitrag lesen

SELF-Forum

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