Ergebnis 1 bis 5 von 5
  1. #1
    harro23 ist offline Grünschnabel
    registriert
    27-10-2020
    Beiträge
    2

    Question Navigationsmenü mit Javascript (Sortierung)

    Hallo zusammen,

    ich habe folgendes Problem beim Aufbau meiner Seite:
    Ich lasse die Inhalte
    Code:
    <ul>
             <li class="list active" data-filter="blog"><a href="#">Blog</a></li>
              <li class="list" data-filter="portrait"><a href="#">Portrait</a></li>
             
     </ul>
    
    <div class="gal_img blog">
                     <a href="bilder/1920/bild1.jpg" data-lightbox="fancy" data-title=""><img src="bilder/1920/bild1.jpg" /></a>
    </div>
    <div class="gal_img portrait">
                    <a href="bilder/1920/bild2.jpg" data-lightbox="fancy" data-title=""><img src="bilder/1920/bild2.jpg" /></a>
    </div>
    (ist eine Bilder-Galerie)

    durch folgendes Script anzeigen (bei Click auf den Link in der Navi):
    Code:
    <script type="text/javascript">
          $(document).ready(function(){
            $('.list').click(function(){
              const value = $(this).attr('data-filter');
              if (value == 'all'){
                $('.gal_img').show('1000');
              }
              else{
              $('.gal_img').not('.'+value).hide('1000');
              $('.gal_img').filter('.'+value).show('1000');
              }
           })
    Das funktioniert auch, bei Klick auf "Blog" oder "Portrait" werden die entsprechenden Bilder angezeigt.

    ABER

    Beim aufrufen der Seite erscheinen ALLE Bilder im Content, d.h erst alle mit "blog", dann alle mit "portrait".
    Ich möchte gern, dass beim aufrufen der Seite NUR die Bilder mit dem Tag "blog" angezeigt werden.
    Ich kann es soweit überblicken, dass die Sortierung im Script erst nach dem .click event anfängt, aber leider bin ich außerstande, dass selbst zu lösen und hoffe auf Ideen oder Unterstützung.
    Vielen Dank im Vorraus.

  2. #2
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.822

    AW: Navigationsmenü mit Javascript (Sortierung)

    Moin!
    Ergänze in <div class="gal_img portrait"> noch ein style="display:none;"
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png

  3. #3
    harro23 ist offline Grünschnabel
    registriert
    27-10-2020
    Beiträge
    2

    AW: Navigationsmenü mit Javascript (Sortierung)

    Jau, vielen Dank. Ich habe den style der class .portrait in der css zugefügt und es funktioniert!

  4. #4
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.822

    AW: Navigationsmenü mit Javascript (Sortierung)

    Ja das geht auch. Damit steuerst du es aus dem CSS, welches i. d. R. statisch ist. Das HTML wird hingegen i. d. R. dynamisch (PHP, Perl, Python etc.) erzeugt und erlaubt an dieser Stelle mehr Flexibilität, wenn man z. B. in Einzelfällen die Seite mit einer anderen Galerie öffnen will (z. B. die zuletzt angezeigte etc.).
    Aber das ist nur die Begründung aus meiner Sicht und keine Vorschrift oder so.
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png

  5. #5
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

    AW: Navigationsmenü mit Javascript (Sortierung)

    Du scheinst mit dem class="list active" steuern zu wollen, welche Liste angezeigt wird.
    Wenn das der Fall ist, könntest du in deinem JS einfach ein $('.list.active').click(); am Ende in deinen ready-Block packen.

    PS: die <a href="#"> sind unnötig und machen manchmal Probleme. Entferne die besser und mach deine Cursor-Änderung per CSS.

Ähnliche Themen

  1. Navigationsmenü
    Von gitty im Forum JavaScript
    Antworten: 12
    Letzter Beitrag: 06-02-2010, 13:33
  2. Sortierung mit Javascript
    Von IceTigers im Forum JavaScript
    Antworten: 6
    Letzter Beitrag: 27-12-2009, 11:24
  3. Navigationsmenü.....
    Von Mr. Noob im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 11-02-2007, 23:53
  4. Navigationsmenü
    Von SaBorn im Forum JavaScript
    Antworten: 4
    Letzter Beitrag: 22-10-2001, 20:14

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •