تسجيل الدخول | التسجيل | الأسئلة المتكررة
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

CODE: تحديد الكل
<!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