Styles für Schwarzen kreis und Lampel, wenn man bei Lampel auf die Kreise klickt, werden togglen sie schwarz<->farbe

src/main/webapp/WEB-INF/jsp/index.jsp

@@ -74,7 +74,13 @@
                 $(document).ready(function() {
                     $("#tabs").tabs();
                     $("#v-tabs").tabs().addClass('ui-tabs-vertical');
-
+                    $(".lampel .circle").click(function() {
+                        if($(this).hasClass('black')){
+                            $(this).removeClass('black');
+                        } else {
+                            $(this).addClass('black');
+                        }
+                    });
                 });
             }
         );
@@ -97,6 +103,7 @@
                 <ul>
                     <li><a href="#v-tabs-1">Licht</a></li>
                     <li><a href="#v-tabs-2">Musik</a></li>
+                    <li><a href="#v-tabs-3">Lampel</a></li>
                 </ul>
                 <div id="v-tabs-1">
                     Liiiiiichtsteuerung
@@ -106,6 +113,15 @@
                     Muuuusik
 
                 </div>
+                <div id="v-tabs-3">
+                    <div class="lampel">
+                        <span class="circle red"></span>
+                        <span class="circle yellow"></span>
+                        <span class="circle green"></span>
+
+                    </div>
+
+                </div>
             </div>
             <div class="buzzer">
                 <span class="circle red">Zu</span>

src/main/webapp/resources/css/styles.css

@@ -28,6 +28,14 @@ body {
     background-color: green;
     color: #ffffff;
 }
+.circle.yellow {
+    background-color: #ffed4c;
+    color: #000000;
+}
+.circle.black {
+    background-color: #000000;
+    color: #ffffff;
+}
 
 .buzzer {
     width: 95px;
@@ -42,6 +50,17 @@ body {
     margin-top: -400px;
 }
 
+.lampel {
+    border: 2px solid white;
+    padding: 15px;
+    height: 64px;
+    width: 204px;
+    margin: 0 auto;
+}
+.lampel .circle {
+    display: inline-block;
+    margin: 0px;
+}
 /* Vertical Tabs
 ----------------------------------*/
 .ui-tabs-vertical .ui-tabs-nav {