Hallo,
bei einer bestehenden Webseite möchte ich eine Filter-Funktion einbauen.
Hierbei sollen die Bilder nach "RED", "GREEN", "BLUE" gefiltert werden.
Der unten stehenden Code funktioniert.
Sobald ich jedoch in dem ersten DIV-Kontainer die Zeilen <article class="small-1"> und </article> einfüge (also, die Auskommentierung entferne), funktionieren die Filter nicht mehr.
Wahrscheinlich muss ich im CSS nur einen anderen Selektor benutzen.
Ich habe mir den Code von dieser Webseite kopiert und entsprechen umgebaut: http://jsfiddle.net/joshvogt/UybPY/
Kann mir jemand einen Tipp geben, was ich ändern muss, ohne gleich die vorhandene Struktur zu verändern?
Vielen Dank!
-----------------------------
<style type="text/css">
a[data-filter='red']:focus ~ article:not([data-filter='red'])
{ display:none;}
a[data-filter='green']:focus ~ article:not([data-filter='green'])
{ display:none;}
a[data-filter='blue']:focus ~ article:not([data-filter='blue'])
{ display:none;}
</style>
...
<div class="content">
<!--<article class="small-1">-->
<h1>Headline</h1>
<a href="#" data-filter="all">ALL</a>
<a href="#" data-filter="red">RED</a>
<a href="#" data-filter="green">GREEN</a>
<a href="#" data-filter="blue">BLUE</a>
<!--</article>-->
<article class="small-2" data-filter="red">
<a href="#"><img src="http://placehold.it/350x150.jpg&text=RED" class="thubnail-bilder_slideshow"/>
</article>
<article class="small-2" data-filter="blue">
<a href="#"><img src="http://placehold.it/350x150.jpg&text=BLUE" class="thubnail-bilder_slideshow"/>
</article>
<article class="small-2" data-filter="green">
<a href="#"><img src="http://placehold.it/350x150.jpg&text=GREEN" class="thubnail-bilder_slideshow"/>
</article>
</div>