Divs aus - und einblenden

A

agalva

Grünschnabel
Erstmal Hallo miteinander,

ich bin ziemlich neu im Javascript und ich helfe einen bekannten bei einer Webseite, leider meine Kenntnisse reichen nicht aus, deswegen suche ich ein wenig Hilfe hier.
Es tut mir Leid wenn ich mich nicht richtig ausdrücken kann, bin dabei Deutsch zu lernen

ich habe einen Div mit 5 Bilder. Jedes Bild solltet einen unterschiedlichen Div darunter anzeigen. (img 1 sollte div id=clubOneDays anzeigen, img 2 -->clubTwoDays usw.) Wenn z.B: Bild 1 ausgewählt werden muss dann wird das div clubOneDays angezeigt und alle andere divs abgeblendet, wenn man gleich danach Bild 2 auswählt sollte das div clubDaysTwo angezeigt, clubDaysOne ausgeblendet und das alle für die restlichen 3 divs....

ich würde gern alles das mit Javascript (jquery geht auch, habe aber damit noch weniger erfahrung)

Vielen Dank im voraus.

HTML: 
<div class="ml-xl mr-xl">
                    <div class="row">
                            <ul class="portfolio-list sort-destination" data-sort-id="portfolio">
                                <li class="col-md-1-5 isotope-item brands">
                                    <div class="portfolio-item">
                                            <span class="thumb-info">
                                                <span class="thumb-info-wrapper">
                                                    <img src="img/projects/project.jpg" class="img-responsive" alt="">
                                                </span>
                                            </span>
                                    </div>
                                </li>
                                <li class="col-md-1-5 isotope-item medias">
                                    <div class="portfolio-item">
                                            <span class="thumb-info">
                                                <span class="thumb-info-wrapper">
                                                    <img src="img/projects/project-1.jpg" class="img-responsive" alt="">
                                                </span>
                                            </span>
                                    </div>
                                </li>
                                <li class="col-md-1-5 isotope-item logos">
                                    <div class="portfolio-item">
                                            <span class="thumb-info">
                                                <span class="thumb-info-wrapper">
                                                    <img src="img/projects/project-2.jpg" class="img-responsive" alt="">
                                                </span>
                                            </span>
                                    </div>
                                </li>
                                <li class="col-md-1-5 isotope-item brands">
                                    <div class="portfolio-item">
                                            <span class="thumb-info">
                                                <span class="thumb-info-wrapper">
                                                    <img src="img/projects/project-3.jpg" class="img-responsive" alt="">
                                                </span>
                                            </span>
                                    </div>
                                </li>
                                <li class="col-md-1-5 isotope-item logos">
                                    <div class="portfolio-item">
                                            <span class="thumb-info">
                                                <span class="thumb-info-wrapper">
                                                    <img src="img/projects/project-4.jpg" class="img-responsive" alt="">
                                                </span>
                                            </span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                   </div>
                   <div class="container" id="clubOneDays" style="width:1530px; display:block">
                        <div class="col-md-12">
                            <div class="row">
                                <ul class="portfolio-list">
                                    <li class="col-md-2 col-sm-6 col-xs-12" >
                                        <div class="portfolio-item">
                                                <span class="thumb-info thumb-info-lighten">
                                                    <span class="thumb-info-wrapper">
                                                        <img src="img/projects/project.jpg" class="img-responsive" alt="">
                                                        <span class="thumb-info-title">
                                                            <span class="thumb-info-inner">Montag</span>
                                                        </span>
                                                    </span>
                                                </span>
                                        </div>
                                    </li>
                                    <li class="col-md-2 col-sm-6 col-xs-12">
                                        <div class="portfolio-item">
                                            <span class="thumb-info thumb-info-lighten">
                                                <span class="thumb-info-wrapper">
                                                    <img src="img/projects/project-2.jpg" class="img-responsive" alt="">
                                                        <span class="thumb-info-title">
                                                            <span class="thumb-info-inner">Dienstag</span>
                                                        </span>
                                                </span>
                                            </span>
                                        </div>
                                    </li>
                                    <li class="col-md-2 col-sm-6 col-xs-12">
                                        <div class="portfolio-item">
                                            <span class="thumb-info thumb-info-lighten">
                                                <span class="thumb-info-wrapper">
                                                    <img src="img/projects/project-2.jpg" class="img-responsive" alt="">
                                                        <span class="thumb-info-title">
                                                            <span class="thumb-info-inner">Mittwoch</span>
                                                        </span>
                                                </span>
                                            </span>
                                        </div>
                                    </li>
                                    <li class="col-md-2 col-sm-6 col-xs-12">
                                        <div class="portfolio-item">
                                            <span class="thumb-info thumb-info-lighten">
                                                <span class="thumb-info-wrapper">
                                                    <img src="img/projects/project-2.jpg" class="img-responsive" alt="">
                                                        <span class="thumb-info-title">
                                                            <span class="thumb-info-inner">Donnerstag</span>
                                                        </span>
                                                </span>
                                            </span>
                                        </div>
                                    </li>
                                    <li class="col-md-2 col-sm-6 col-xs-12">
                                        <div class="portfolio-item">
                                            <span class="thumb-info thumb-info-lighten">
                                                <span class="thumb-info-wrapper">
                                                    <img src="img/projects/project-2.jpg" class="img-responsive" alt="">
                                                        <span class="thumb-info-title">
                                                            <span class="thumb-info-inner">Freitag</span>
                                                        </span>
                                                </span>
                                            </span>
                                        </div>
                                    </li>
                                    <li class="col-md-2 col-sm-6 col-xs-12">
                                        <div class="portfolio-item">
                                            <span class="thumb-info thumb-info-lighten">
                                                <span class="thumb-info-wrapper">
                                                    <img src="img/projects/project-3.jpg" class="img-responsive" alt="">
                                                        <span class="thumb-info-title">
                                                            <span class="thumb-info-inner">Samstag</span>
                                                        </span>
                                                </span>
                                            </span>
                                        </div>
                                    </li>
                                    <li class="col-md-2 col-sm-6 col-xs-12">
                                        <div class="portfolio-item">
                                            <span class="thumb-info thumb-info-lighten">
                                                <span class="thumb-info-wrapper">
                                                    <img src="img/projects/project-4.jpg" class="img-responsive" alt="">
                                                        <span class="thumb-info-title">
                                                            <span class="thumb-info-inner">Sonntag</span>
                                                        </span>
                                                </span>
                                            </span>
                                        </div>
                                    </li>
                                </ul>
                              </div>
                        </div>
                    </div>
                    <div class="container" id="ticketsClubOne" style="display:block">
                        <div class="row">
                            <div class="col-md-12">
                                <h4>Tickets</h4>
                                    <table class="table table-bordered">
                                        <tbody>
                                            <tr>
                                                <td style="width:20%" align="center">
                                                </td>
                                                <td style="Width:60%">
                                                    Description
                                                </td>
                                                <td style="width:20%" align="center">
                                                    <button type="button" class="btn btn-primary mr-xs mb-sm">tickets</button>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                </td>
                                                <td>
                                                    Description 2
                                                </td>
                                                <td align="center">
                                                    <button type="button" class="btn btn-primary mr-xs mb-sm">tickets</button>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    <div class="container" id="clubTwoDays" style="width:1530px; display:block">
                        <div class="col-md-12">
                            <div class="row">
                                <ul class="portfolio-list">
                                    <li class="col-md-2 col-sm-6 col-xs-12" >
                                        <div class="portfolio-item">
                                                <span class="thumb-info thumb-info-lighten">
                                                    <span class="thumb-info-wrapper">
                                                        <img src="img/projects/project.jpg" class="img-responsive" alt="">
                                                        <span class="thumb-info-title">
                                                            <span class="thumb-info-inner">Montag</span>
                                                        </span>
                                                    </span>
                                                </span>
                                        </div>
                                    </li>
                                    <li class="col-md-2 col-sm-6 col-xs-12">
                                        <div class="portfolio-item">
                                            <span class="thumb-info thumb-info-lighten">
                                                <span class="thumb-info-wrapper">
                                                    <img src="img/projects/project-2.jpg" class="img-responsive" alt="">
                                                        <span class="thumb-info-title">
                                                            <span class="thumb-info-inner">Dienstag</span>
                                                        </span>
                                                </span>
                                            </span>
                                        </div>
                                    </li>
                                    <li class="col-md-2 col-sm-6 col-xs-12">
                                        <div class="portfolio-item">
                                            <span class="thumb-info thumb-info-lighten">
                                                <span class="thumb-info-wrapper">
                                                    <img src="img/projects/project-2.jpg" class="img-responsive" alt="">
                                                        <span class="thumb-info-title">
                                                            <span class="thumb-info-inner">Mittwoch</span>
                                                        </span>
                                                </span>
                                            </span>
                                        </div>
                                    </li>
                                    <li class="col-md-2 col-sm-6 col-xs-12">
                                        <div class="portfolio-item">
                                            <span class="thumb-info thumb-info-lighten">
                                                <span class="thumb-info-wrapper">
                                                    <img src="img/projects/project-2.jpg" class="img-responsive" alt="">
                                                        <span class="thumb-info-title">
                                                            <span class="thumb-info-inner">Donnerstag</span>
                                                        </span>
                                                </span>
                                            </span>
                                        </div>
                                    </li>
                                    <li class="col-md-2 col-sm-6 col-xs-12">
                                        <div class="portfolio-item">
                                            <span class="thumb-info thumb-info-lighten">
                                                <span class="thumb-info-wrapper">
                                                    <img src="img/projects/project-2.jpg" class="img-responsive" alt="">
                                                        <span class="thumb-info-title">
                                                            <span class="thumb-info-inner">Freitag</span>
                                                        </span>
                                                </span>
                                            </span>
                                        </div>
                                    </li>
                                    <li class="col-md-2 col-sm-6 col-xs-12">
                                        <div class="portfolio-item">
                                            <span class="thumb-info thumb-info-lighten">
                                                <span class="thumb-info-wrapper">
                                                    <img src="img/projects/project-3.jpg" class="img-responsive" alt="">
                                                        <span class="thumb-info-title">
                                                            <span class="thumb-info-inner">Samstag</span>
                                                        </span>
                                                </span>
                                            </span>
                                        </div>
                                    </li>
                                    <li class="col-md-2 col-sm-6 col-xs-12">
                                        <div class="portfolio-item">
                                            <span class="thumb-info thumb-info-lighten">
                                                <span class="thumb-info-wrapper">
                                                    <img src="img/projects/project-4.jpg" class="img-responsive" alt="">
                                                        <span class="thumb-info-title">
                                                            <span class="thumb-info-inner">Sonntag</span>
                                                        </span>
                                                </span>
                                            </span>
                                        </div>
                                    </li>
                                </ul>
                              </div>
                        </div>
                    </div>
                    <div class="container" id="ticketsClubTwo" style="display:block">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="row">
                                    <div class="col-md-12">
                                        <h4>Tickets</h4>
                                        <table class="table table-bordered">
                                            <tbody>
                                                <tr>
                                                    <td style="width:20%" align="center">
                                                    </td>
                                                    <td style="Width:60%">
                                                        Description 3
                                                    </td>
                                                    <td style="width:20%" align="center">
                                                        <button type="button" class="btn btn-primary mr-xs mb-sm">tickets</button>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                    </td>
                                                    <td>
                                                        Description 4
                                                    </td>
                                                    <td align="center">
                                                        <button type="button" class="btn btn-primary mr-xs mb-sm">tickets</button>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
      </div>
 
Zuletzt bearbeitet:
Füge die ID des div in einem data-Attribut hinzu:
Code: 
<li class="col-md-1-5 isotope-item medias" data-iddiv="clubOneDays">
usw.
Dann registriere einen Eventlistener auf dir li-Elemente:
Code: 
$(".col-md-1-5").on("click", function() {
   $(".container").css("display", "none");
   $("#' + $(this).attr("data-iddiv")).css("display", "block");
});
Diesen Code nach dem ganzen HTML notieren, am besten vor dem schließenden </body>. Und vergiss nicht, jQuery einzubinden.
Du hast nach JS/jQuery gefragt, aber man könnte diese Aufgabe auch ohne Javascript, nur mit CSS lösen.
 
Zuletzt bearbeitet:
sehr geil, vielen vielen Dank @Sempervivum, habe aber jetzt das Problem das mein Logo un mein menu auch ausgeblendet werden :D
also alle div containers...

Ich habe mehrere div der class containers im einsatz, also muss iwie das ganze verfeinern....


HTML: 
<header id="header" data-plugin-options='{"stickyEnabled": true, "stickyEnableOnBoxed": true, "stickyEnableOnMobile": true, "stickyStartAt": 57, "stickySetTop": "-57px", "stickyChangeLogo": true}'>
                <div class="header-body">
                    <div class="header-container container">
                        <div class="header-row">
                            <div class="header-column">
                                <div class="header-logo">
                                    <a href="index.html">
                                        <img alt="Porto" width="111" height="54" data-sticky-width="82" data-sticky-height="40" data-sticky-top="33" src="img/logo.png">
                                    </a>
                                </div>
                            </div>
                            <div class="header-column">
                             
                                <div class="header-row">
                                    <div class="header-nav">
                                        <button class="btn header-btn-collapse-nav" data-toggle="collapse" data-target=".header-nav-main">
                                            <i class="fa fa-bars"></i>
                                        </button>
                                     
                                        <div class="header-nav-main header-nav-main-effect-1 header-nav-main-sub-effect-1 collapse">
                                            <nav>
                                                <ul class="nav nav-pills" id="mainNav">
                                                    <li class="dropdown active">
                                                        <a class="dropdown-toggle" href="#">
                                                            Home
                                                        </a>
                                                    </li>
                                                    <li class="">
                                                        <a class="dropdown-toggle" href="#">
                                                            menu2
                                                        </a>
                                                    </li>
                                                    <li class="">
                                                        <a class="dropdown-toggle" href="#">
                                                            menu3
                                                        </a>
                                                    </li>
                                                    <li class="dropdown">
                                                        <a class="dropdown-toggle" href="#">
                                                            menu4
                                                        </a>
                                                    </li>
                                                </ul>
                                            </nav>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </header>
 
Zuletzt bearbeitet:
Das wundert mich nicht, weil .container eine sehr allgemeine Bezeichnung ist. Du musst den Containern, die ein- und ausgeblendet werden, eine spezifischere Klasse geben, die Du nur dort verwendest:
Code: 
<div class="container spezifische-klasse" id="ticketsClubTwo" style="display:block">
Code: 
$(".col-md-1-5").on("click", function() {
   $(".spezifische-klasse").css("display", "none");
   $("#' + $(this).attr("data-iddiv")).css("display", "block");
});
 
@Sempervivum Also funktioniert super, wollte das gleiche machen für das container id=ticketsClubOne irgendwie habe ich es aber nicht hinbekommen
HTML: 
<li class="col-md-2 col-sm-6 col-xs-12" data-iddiv="ticketsClubOneDayOne“>


<div class="containerTickets" id="ticketsClubOneDayOne" style="display:none“>



 <script> $(".col-md-2 col-sm-6 col-xs-12").on("click", function() {

    $(".containerTickets").css("display", "none"); $("#" + $(this).attr("data-iddiv")).css("display", "block");

});

</script>
 
Hats geklappt, musste das li class nur auf "col-md-2" kürzen
von der Funktionalität her es tut was es machen soll, habe aber jetzt folgende Problematik:
das mit dem Bilder anklicken klappt super, auch die gewünschte divs werden angezeigt, wenn man einen div auswählt erscheint darunter noch einen div, aber wenn ich einen anderen Bild auswähle und zurück zum vorherigen Bild klicke, sind dann alle darunter liegenden Divs sichtbar...
Kann man dass so optimieren dass wenn man einen anderen Bild auswählt alle geöffneten divs zu gehen?

Vielen Dank im Voraus
 
alle geöffneten divs zu gehen?
Zum Vergrößern anklicken....
Das macht diese Anweisung:
Code: 
$(".containerTickets").css("display", "none");
Aus deinem jQuery und HTML kann ich keinen Fehler entdecken. Hast Du auch allen Containern die Klasse containerTicket gegeben? Wenn Du den Fehler nicht findest, dann poste die URL deiner Seite. Oder wenn sie nicht online ist, das vollständige HTML und Javascript.
Und dieses hier scheint nicht zu stimmen:
Code: 
$(".col-md-2 col-sm-6 col-xs-12")
col-sm-6 ohne Punkt davor würde ein HTML-Element mit dem Tagnamen col.sm-6 ansprechen und so etwas gibt es nicht.
Du musst es so lassen wie in unseren ersten Postings:
Code: 
<li class="col-md-1-5
Diese Klasse ist einheitlich für alle dein li-Elemente und
$(".col-md-1-5").on("click"
Zum Vergrößern anklicken....
registriert den click-Handler für alle Elemente mit dieser Klasse.
 
Zuletzt bearbeitet:
@Sempervivum Vielen dank für deine Mühe, war die Tage Krank, deswegen die Späte Rückmeldung:
Darunter findest du das gesamte Code, also am anfang zustand sieht man ja nur die 5 bilder, wenn man einen davon auswählt wird der darunter liegende div angezeigt. das bleibt aber so auch wenn man ausserhalb dieses bild woanders klickt, es wäre schön wenn man ausserhalb anklickt geht das div wieder zu....
Cool wäre, wenn mann einen bild aussucht und nachher einen anderen, dass das erste bild mehr oder weniger auf dem anfangzustand geht und somit werden alle darunter liegende divs auf display none angesetzt...

das selbe passiert für die tage vom einzelnen clubs... die bleiben immer offen...
 

Anhänge

  • index.html
    42,9 KB · Aufrufe: 0
Also ich habe jetzt mittlerweile dass auch geschafft, was mich aber noch beschäftigt ist das ich würde auch gern dass wenn man zweimal auf dem gleichen Objekt klickt dann geht das div zu, also wenn man auf Bild 1 drückt geht einen div darunter auf, wenn man auf den gleichen Bild 1 zum zweiten mal drückt, geht diesen div dann zu.... jemand hat vielleicht eine Ahnung?
Jquery code sieht so
HTML: 
 <script>
                $(".col-md-1-5").on("click", function() {
                      $(".containerDays").css("display", "none"); $("#" + $(this).attr("data-iddiv")).css("display", "block");
                        });
        </script>
        <script>
                $(".col-md-2").on("click", function() {
                      $(".containerTickets").css("display", "none"); $("#" + $(this).attr("data-iddiv")).css("display", "block");
                        });
        </script>
        <script>
                $(document).on('click', function (e) {
                    if ($(e.target).closest("#clubAuswahl").length === 0) {
                        $(".containerDays").hide();
                    }
                });
        </script>
        <script>
        $(document).on('click', function (e) {
                    if ($(e.target).closest(".containerDays").length === 0) {
                        $(".containerTickets").hide();
                    }
                });
        </script>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück