התחבר | הרשמה | שאלות נפוצות
Anonymous

toggle slider Zustand abfragen

+ פרסם תגובה

הודעה אחת עמוד 1 מתוך 1


toggle slider Zustand abfragen

על ידי mainstream » ב' ינואר 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

קוד: בחר הכל
<!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>
סמל אישי של המשתמש

mainstream

  • הודעות: 1
  • הצטרף: א' ינואר 07, 2018 3:27 pm


+ פרסם תגובה

עמוד 1 מתוך 1

cron