Raoul Roul: Such Tabs

Hi, fuer mein Studium muss ich eine sehr simple Homepage basteln. Dafuer brauch ich zwei Tabs, schnelle Suche und Erweiterte Suche. Wenn man auf Schnelle Suche klickt erscheint ein simples Suchfeld und bei Erweiterte Suche das erweiterte Suchfeld....Ich moechte jetzt nicht wissen wie mam die Suchfelder erstellt sondern nur wie man mit html solche tabs erstellt. So dass man zwischen schnellen und erweiterter Suche auswaehlen kann.

akzeptierte Antworten

  1. Muss man dafuer extra 2 zusaetzliche Seiten kreieren, eine fuer die schnelle und eine fuer die erweiterte Suche? so das man staendig auf ne andere Seite wechselt? oder geht es einfacherer. (konnte anfangs Beitrag nicht mehr bearbeiten!?)

  2. wie man mit html solche tabs erstellt. So dass man zwischen schnellen und erweiterter Suche auswaehlen kann.

    Sowas geht mit reinem html/CSS.

    <form id="formular" ... >
      <a href='#schnell'>Schnellsuche</a><a href='#erweitert'>Erweiterte Suche</a>
      <div class="tab" id="schnell">
        <input ...>
      </div>
      <div class="tab" id="erweitert">
        <select ...>
         ...
        </select>
      </div>
      <button>senden</button>
    </form>
    

    css:

    .tab  { display: none; }
    .tab:target  { display: block; }
    
    1. Noch mehr Tricks zu dieser Geschichte:

      https://home.fastix.org/Files/Computing/all_in_one_page.html

      (Im Quelltext ist alles drin ...)

      1. Hallo Google weiß alles,

        https://home.fastix.org/Files/Computing/all_in_one_page.html

        Nett. Gibts auch im Wiki. Nachteilig imho ist bei beiden Varianten, dass die Browser-Historie zugemüllt wird.

        Nachteilig bei deiner Variante ist zudem, weil nicht barrierefrei:

        • <a class="close" href="#">X</a> „X“ ist ein schlechter Linktext.
        • <a class="close" href="#" title="schließen">X</a> ist schon etwas besser.
        • <a class="close" href="#">schließen</a> ist gut. Zum Aufhübschen Pseudoelemente verwenden wie im Wiki.
        • <button type="button" class="close">schließen</button> ist auch eine Alternative. Button passt imho semantisch besser, hat aber in diesem Fall den Nachteil, dass JavaScript benötigt wird. Da könnte das a-Element als Fallback dienen.

        Bis demnächst
        Matthias

        --
        Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
        1. Vielen Dank fuer die Antworten, war wirklich sehr hilfreich. Google weiss vieleicht viel, jedoch muss man wissen wonach man sucht und die richtigen Begriffe eingeben... Wohl einer der Gruende warum ich auf Google nichts fand. Nochmals Danke und ein schoenes Rest Wochenende.

        2. @@Matthias Apsel

          • <a class="close" href="#">X</a> „X“ ist ein schlechter Linktext.

          „X“ ist sowieso auch ein schlechtes Kreuz. Da gibt’s besseres: × oder ❌.

          • <a class="close" href="#" title="schließen">X</a> ist schon etwas besser.

          Anstatt title lieber aria-label="schließen" — das erzeugt nicht so ’nen hässlichen Tooltip.

          • <a class="close" href="#">schließen</a> ist gut.

          Nö. Wieso sollte ein Sprung zum Seitenanfang gut sein?

          • <button type="button" class="close">schließen</button> ist auch eine Alternative.

          Alternative wozu?

          LLAP 🖖

          --
          “I love to go to JS conferences to speak about how to avoid using JavaScript. Please learn CSS & HTML to reduce your JS code bloat.” —Estelle Weyl
    2. Habe jetzt gerade eine Weile gegrübelt, warum das Wiki-Beispiel funktioniert und der Vorschlag hier nicht. Grund: Die Semikolons hinter den Styles. Mit denen funktioniert es nicht.

      1. Hallo Rolf b,

        Habe jetzt gerade eine Weile gegrübelt, warum das Wiki-Beispiel funktioniert und der Vorschlag hier nicht. Grund: Die Semikolons hinter den Styles. Mit denen funktioniert es nicht.

        Sie sind versehentlich an der falschen Stelle. Ich reparier das mal.

        Bis demnächst
        Matthias

        --
        Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.