• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage <option> - tag Verlinkung?

majesticc89

Mitglied
Servus Leute,
folgender Code:

HTML:
Code:
<form>
  <label>Auswahl:
    <select name="spieltage">
       <option>Auswahl 1</option>
        <option>Auswahl 2</option>
        <option>Auswahl 3</option>
        <option>Auswahl 4</option>
        <option>Auswahl 5</option>
     </select>
  </label>
</form>

<p> &nbsp; </p>
<div class="content1" style="display:none;">
  <p> Content 1 </p>
</div>

<p> &nbsp; </p>
<div class="content2" style="display:none;">
  <p> Content 2 </p>
</div>

<p> &nbsp; </p>
<div class="content3" style="display:none;">
  <p> Content 3 </p>
</div>

<p> &nbsp; </p>
<div class="content4" style="display:none;">
  <p> Content 4 </p>
</div>

<p> &nbsp; </p>
<div class="content5" style="display:none;">
  <p> Content 5 </p>
</div>

CSS:
Code:
div.content1 {
  text-align: center;
  width: 100px;
  height: 50px;
  border: 1px solid black;
  background: white;
  border-radius: 5px;
}

div.content2 {
  text-align: center;
  width: 100px;
  height: 50px;
  border: 1px solid black;
  background: white;
  border-radius: 5px;
}

div.content3 {
  text-align: center;
  width: 100px;
  height: 50px;
  border: 1px solid black;
  background: white;
  border-radius: 5px;
}

div.content4 {
  text-align: center;
  width: 100px;
  height: 50px;
  border: 1px solid black;
  background: white;
  border-radius: 5px;
}

div.content5 {
  text-align: center;
  width: 100px;
  height: 50px;
  border: 1px solid black;
  background: white;
  border-radius: 5px;
}

(Der CSS-Code kann vernachlässigt werden).

Dank euch habe ich nun mehrere Buttons erstellt, die mit Hilfe eines JavaScripts den jeweiligen Content anzeigen, danke noch einmal.

Nun meine nächste Frage: Ist es möglich (siehe HTML) die <option> - Tags an bestimmte divs zu binden?
Bspw.
<option> Auswahl 1 </option> an div.class="content1"
usw.

und das bei der jeweiligen Auswahl NUR derjenige Content angezeigt wird.
Das wäre einfacher als 5 Buttons zu erstellen / zu verstecken und mit der :hover Funktion zu arbeiten.
 
Werbung:
Zurück
Oben