Login | Iscriviti | FAQ
Anonymous

toggle slider Zustand abfragen

+ Rispondi al messaggio

1 messaggio Pagina 1 di 1


toggle slider Zustand abfragen

da mainstream » lun gen 08, 2018 1:15 pm

Hallo liebes Forum,
zunächst ein frohes neues Jahr.

Ich bin in Sachen html ein echter Anfänger und habe deshalb eine Frage an Euch. Ich habe mir eine html Seite (Code siehe weiter unten) erstellt. Dort sind 5 Slider dargestellt die auch beim Anklicken das tun was sie sollen. Soweit so gut.

Nun möchte ich jedoch anhand der Hintergrundfarbe (oder der Stellung) der einzelnen Slider jeweils eine PHP Datei ausführen.

Etwa so:
Wenn die Hintergrundfarbe des jeweiligen Sliders grün ist führe phpx aus wenn die Hintergrundfarbe rot ist führe phpy aus.

Geht sowas?

Vielen Dank für Eure Hilfe.

Ich hoffe ich bin im richtigen Forum gelandet

Gruß

mainstream

Codice: Seleziona tutto
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0;" />
  <link rel="stylesheet" type="text/css" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
  <style>
main {
  background: white;
}

.toggle label {
  position: relative;
  display: inline-block;
  width: 15em;
  height: 4em;
}

.toggle input {
  display: none;
}

.toggle  .slider {    /* Grundfläche */
  position: absolute;
  cursor: pointer;
  top: 1.5em;
  left: 2em;
  width: 4em;
  height: 2em;
  background-color: #c32e04; /* red */
  transition: all .3s ease-in-out;
  border-radius: 1em; 
}

.toggle  .slider:before {  /* verschiebbarer Button */
  position: absolute;
  content: "";
  height: 1.6em;
  width: 1.6em;
  left: 0.2em;
  bottom: 0.2em;
  background-color: white;
  border-radius: 50%;
  transition: all .3s ease-in-out;
}

.toggle input:checked + .slider {
  background-color: #5a9900; /* green */
}

.toggle  input:checked + .slider:before {
  -webkit-transform: translateX(1.9em);  /* Android 4 */
  -ms-transform: translateX(1.9em);   /* IE9 */
  transform: translateX(1.9em);
}



  </style>
  <title>FlipFlop-Schalter</title>
</head>

<body>
 
  <main>
         
      <div class="toggle">
      <label>
        An-/Aus-Schalter     
        <input type="checkbox">
        <span class="slider"></span>
      </label>
    </div>


<div class="toggle">
      <label>
        An-/Aus-Schalter     
        <input type="checkbox">
        <span class="slider"></span>
      </label>
    </div>   
             

<div class="toggle">
      <label>
        An-/Aus-Schalter     
        <input type="checkbox">
        <span class="slider"></span>
      </label>
    </div>   

<div class="toggle">
      <label>
        Keller Licht     
        <input type="checkbox">
        <span class="slider"></span>
      </label>
    </div>   

<div class="toggle">
      <label>
        Kugellampen   
        <input type="checkbox">
        <span class="slider"></span>
      </label>
    </div>             
 
</main>
</body>
</html>
Avatar utente

mainstream

  • Messaggi: 1
  • Iscritto il: dom gen 07, 2018 3:27 pm


+ Rispondi al messaggio

Pagina 1 di 1