Sobald man in dem Beispiel den Filter "Katzen" anwendet, werden die Einträge "Hund 1", "Hund 2", "Maus 1" und "Maus 2" ausgeblendet. Die Überschriften "Hunde" und "Maus" (<h2>) bleiben jedoch stehen.
Und diese nicht benötigten Überschriften möchte ich auch ausblenden, wenn kein nachfolgender <div>-Container angezeigt wird.
Auf einer Webseite verwende ich einen JavaScript "data-filter" um bestimmte DIV-Kontainer auszublenden (s.u.)
Es gibt Headlines (in dem Beispiel <h2>), die dann manchmal nicht benötigt werden und ausgeblendet werden sollen.
Leider kenne ich mich mit JavaSript überhaupt nicht aus und weiß gar nicht, wie ich das Problem lösen soll.
Die in dem Beispiel verwendeten Scripte habe ich mir aus dem Internet kopiert und eingebaut.
Am liebsten würde ich das mit CSS lösen, jedoch muss ja hier eine Abfrage erfolgen. Daher muss ich das wohl mit JavaScript lösen, oder?
Kann mir jemand helfen?
<head>
<title>Test</title>
<script src="http://www.muench-herdecke.de/js/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function(){
$('.buttons a').click(function(){
$('.container').hide();
var sAttr = $(this).attr("data-filter");
if (sAttr == 'all')
$('.container').show();
else
$('.' + sAttr).show();
return false;
});
});
</script>
</head>
<body>
<h1>Filter:</h1>
<div class="buttons">
<a data-filter="all">alle Tiere</a>
I
<a data-filter="hund">Hund</a>
I
<a data-filter="katze">Katze</a>
I
<a data-filter="maus">Maus</a>
</div>
<h2>Hunde</h2>
<div class="container hund">
<h3>Hund 1</h3>
</div>
<div class="container hund">
<h3>Hund 2</h3>
</div>
<h2>Katze</h2>
<div class="container katze">
<h3>Katze 1</h3>
</div>
<div class="container katze">
<h3>Katze 2</h3>
</div>
<h2>Maus</h2>
<div class="container maus">
<h3>Maus 1</h3>
</div>
<div class="container maus">
<h3>Maus 2</h3>
</div>
</body>