登录 | 注册 | FAQ
Anonymous

toggle slider Zustand abfragen

+ 发表回复

1 篇帖子 分页: 1 / 1


toggle slider Zustand abfragen

mainstream » 周一 1月 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
  • 注册: 周日 1月 07, 2018 3:27 pm


+ 发表回复

分页: 1 / 1