Bei onclick bestimmte DIV-Container ausblenden.

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Bei onclick bestimmte DIV-Container ausblenden.

    Moin moin Jungs,

    folgendes Problem braucht ein Denkanstoß :P bzw ich habe einen aber weiss nicht ob das funktioniert, dank meinen mangelnden JS-Kenntnissen :P

    Also folgende Sache

    <div class="a">aktiv</b>
    <div class="b">aktiv</b>
    <div class="a">inaktiv</b>
    <div class="b">inaktiv</b>
    <div class="a">inaktiv</b>
    <div class="b">not_found</b>
    <div class="a">not_found</b>
    <div class="b">aktiv</b>

    Jetzt will ich das mit Tabs lösen und zwar "Alle| aktiv | inaktiv | not found".
    So nun könnte >>ich<< (^^) das ganze mit IDs lösen, aber dann wären die IDs doppelt was aber auch nicht so gut ist.
    Hab mir überlegt mit JS alle DIV Felder raussuchen die als Titel "aktiv", "inaktiv" und so weiter haben und dann einfach ausbelnden/einblenden.
    Nur stellt sich die Frage wie ich diese raussuchen kann und wie ich diese dann auch ausblenden kann.
    Normal ausblenden/einblenden kann ich ja nur weiss ich halt nicht wie man die bestimmten DIVs raussucht >>UND<< einblendet/ausblendet.

    btw, eine jQuery-Lösung ist bevorzugt, da ich sehr wahrscheinlich den FadeIn/FadeOut-Effekt benutzen werde.

    #Gnah

    ps, bedanke mich jetzt schonmal :P

  • Das dürfte alles erledigen, was Du suchst... Einfach global in den <head> packen, als <script> (nach dem Einbinden der jquery.js), oder direkt im Dokument nach dem Markup für die <div>'s...

    Quellcode

    1. $("div.a,div.b,div.c").click(function () {
    2. $(this).toggle();
    3. });


    Viel Erfolg :)

    Quellcode

    1. var me = new Self();
    2. me.ask("Cui Bono?");

  • div.a ist nicht ein div container mit der Klasse a - es sind alle Div Container mit dieser Klasse.

    Deine Lösung mit dem Container Inhalt ist zwar mit einer Schleife auch möglich, aber ich würde dir wirklich empfehlen mit dem Klassennamen zu arbeiten.
    Du kannst den Container ja mehrere Klasse geben:

    Quellcode

    1. <div class="tabbed">
    2. <div class="b active">aktiv</b>
    3. <div class="a inactive">inaktiv</b>


    Adressieren tust du die child Elemente mit einem ">" Symbol. Der Button muss außerdem ein paar Elemente verstecken.
    Etwa so... (ungetestet)

    Quellcode

    1. <a href="#" onclick="$('.tabbed > div.active').show(); $('.tabbed > div:not(.active)').hide();">aktiv</a>