Ankündigung

Einklappen
Keine Ankündigung bisher.

Blätterfunktion

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Blätterfunktion

    Hallo, ich habe zwar eine Blätterfunktion hier im Forum gesehen, die war aber mit PHP.
    Geht es einfacher, z.B. mit Javascript?
    Eine Aufblähung der html-seiten in ...1.html, ...2.html bis ca. 3-5 wäre bei den paar Seiten
    zwar einfach, ist aber sicher keine gute Lösung.
    Da ich mir Javscript gerade anschauen will und PHP gar nicht kenne, wäre eine
    Alternative zu PHP zu suchen?

    Viele Grüße
    Gerhard



  • #2
    Ja, es gibt eine Alternative und sie braucht nicht einmal Javascript, nur CSS: Für jede Seite einen Container mit einer ID anlegen. Ein Menü mit Referenzen zu diesen IDs bzw. Ankern anlegen. Den jeweiligen Container mit der Pseudoklasse :target sichtbar machen.

    Kommentar


    • #3
      Oh, an CSS hatte ich hier gar nicht gedacht, das werde ich nächste Woche mal probieren.
      Anscheinend gibt es oft Möglichkeiten die man so einfach gar nicht findet.
      Gut wenn man so ein Forum hat und um Rat fragen kann.
      Viele Grüße
      Gerhard

      Kommentar


      • #4
        Hallo Sepervivum,
        mit der Umsetzung komme ich leider nicht ganz klar.
        Ich habe das als Test in html eingebaut:
        <div id="seite1">
        <p>1. seite test xxxxxxxxx </p>
        <p>test1 xxxxxxxxx </p>
        <p>test1 xxxxxxxxx </p>
        </div>
        <div id="seite2">
        <p>2. seite test xxxxxxxxx </p>
        <p>test2 kkkkkkkkkkkkkkkkkk </p>
        <p>test2 bbbbbbbbbbbbbbbbbbbbbbbbbbb </p>
        </div>
        Es soll auf der html-Seite also seite1 ODER seite2 als Inhalt angezeigt werden,
        als Teil der gesamten html-seite. geht das mit css, habe ich das richtig verstanden?
        In meinem Buch ist das auch nicht richtig beschrieben.
        Jetzt bräuchte ich ja noch eine Navigation um seite1 oder seite2 anzuzeigen.
        Mit Link kann ich aber keine andere Seite zuweisen.
        Sollte man dann in css .seite1:target zuweisen.
        Die Umsetzung ist mir hier nicht verständlich.
        mfg
        gerhard



        Kommentar


        • #5
          Dieses:
          Code:
                  <style>
                      .seite {
                          display: none;
                      }
                      .seite:target {
                          display: block;
                      }
                  </style>
                  <ul class="navi">
                      <li><a href="#seite1">Seite 1</a></li>
                      <li><a href="#seite2">Seite 2</a></li>
                  </ul>
                  <div id="seite1" class="seite">
                      <p>1. seite test xxxxxxxxx </p>
                      <p>test1 xxxxxxxxx </p>
                      <p>test1 xxxxxxxxx </p>
                  </div>
                  <div id="seite2" class="seite">
                      <p>2. seite test xxxxxxxxx </p>
                      <p>test2 kkkkkkkkkkkkkkkkkk </p>
                      <p>test2 bbbbbbbbbbbbbbbbbbbbbbbbbbb </p>
                  </div>
          funktioniert von der Anzeige her. Allerdings hat die Steuerung über Anker den Nebeneffekt, dass der Browser auch zum Anker scrollt, so das die Navigation oben verschwindet. Vielleicht kann jemand mit erweiterten Kenntnissen sagen, wie man das verhindert.
          Zuletzt geändert von Sempervivum; 17.01.2017, 14:11.

          Kommentar

          homepage-forum.de - Hilfe für Webmaster! Statistiken

          Einklappen

          Themen: 56.632   Beiträge: 428.455   Mitglieder: 28.301   Aktive Mitglieder: 45
          Willkommen an unser neuestes Mitglied, phl92.

          Online-Benutzer

          Einklappen

          151 Benutzer sind jetzt online. Registrierte Benutzer: 5, Gäste: 146.

          Mit 3.502 Benutzern waren am 23.01.2020 um 17:20 die meisten Benutzer gleichzeitig online.

          Die neuesten Themen

          Einklappen

          Die neuesten Beiträge

          Einklappen

          Lädt...
          X