Ergebnis 1 bis 2 von 2
-
24-04-2016, 14:21 #1
Grünschnabel
- registriert
- 18-03-2016
- Beiträge
- 3
HTML / CSS / JS / JQ - Slider zum Elemente Ein-/Ausblenden
Hallo meine lieben ich bin hier gerade am verzweifeln...
Ich versuche seit Stunden einen Slider in einer Seite einzubinden welcher beim umlegen Segmente auf der rechten Seite ein bzw ausblendet.
Hier einige Bilder und Codeschnipsel vorweg:
Derzeitiges Layout:
Unbenannt.PNGWie es nach umlegen des Sliders aussehen sollte:
Unbenannt.PNG
Und da der Code die zulässigen 20.000 Zeichen überschreitet:
HTML-Code: https://codeshare.io/26iBj
CSS-Code: https://codeshare.io/JV2nM
Ich habe bereits 2 Lösungsansätze versucht welche aber aus Gründe welche sich mir nicht erschließen beide gescheitert sind.
Lösungsansatz 1: JQuery
HTML-Code:[...] <head> <meta charset="UTF-8"> <title>Startseite - Halunkenbande</title> <link rel="stylesheet" href="css/style.css" type="text/css"> <script type="text/javascript" src="jquery-1.12.3.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ if ($('#slider_schatten').is(:checked)) { $('#object').show(); } else { $('#object').hide(); } }); </script> </head> [...] [...] <td>Schatten-Pets</td> <td> <div class="slider"> <input type="checkbox" id="slider_schatten" name="Schatten-Pets" /> <label class="shadow" for="slider_schatten"></label> </div> </td> [...] [...] <li id="object" style="display:none"> <a href="#" class="figure"><img src="http://forum.jswelt.de/images/pets/monster800.jpg" alt=""></a> <span><a href="#">Schlorps</a></span> </li> [...]
Woran kann es liegen das es nicht funktioniert?
Hoffe ihr könnt mir helfen...
Mit besten GrüßenGeändert von xCrimsonAxe (24-04-2016 um 14:27 Uhr)
-
28-04-2016, 18:05 #2
AW: HTML / CSS / JS / JQ - Slider zum Elemente Ein-/Ausblenden
Dein JS hat einen Syntaxfehler... aber dieser Ansatz scheint mir nicht sehr robust/wartungsfreundlich zu sein. Da IDs ja dokumentenweit eindeutig sein müssen, musst du jedesmal dein JS anpassen, wenn du da ein <li> hinzufügst. Ich würde das über CSS-Klassenänderung auf dem <ul> machen. Z.B. würdest du die Klasse "showShadow" entfernen/hinzufügen und im CSS hättest du dann
Code:li.shadow { display: none; } .showShadow li.shadow { display: initial; }
Ähnliche Themen
-
Elemente ein & ausblenden
Von FrillMaster im Forum JavaScriptAntworten: 7Letzter Beitrag: 01-11-2009, 18:12 -
mehrere Elemente ausblenden
Von scripper im Forum JavaScriptAntworten: 4Letzter Beitrag: 12-11-2008, 00:15 -
combobox-elemente ausblenden
Von berni.walzl im Forum JavaScriptAntworten: 3Letzter Beitrag: 22-08-2008, 23:50 -
Mit Javascript mehrere Block-Elemente ausblenden ?
Von Lagerhaus_Jonny im Forum JavaScriptAntworten: 23Letzter Beitrag: 18-06-2008, 11:01 -
gezielt elemente einer website ausblenden
Von fager im Forum CSS und (X)HTMLAntworten: 0Letzter Beitrag: 18-11-2004, 18:30
Lesezeichen