Such Tabs

[Raoul Roul]

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.

[Raoul Roul]

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!?)

[Google weiß alles]

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; }

[Google weiß alles]

Noch mehr Tricks zu dieser Geschichte:

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

(Im Quelltext ist alles drin ...)

[Matthias Apsel]

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

[Raoul Roul]

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.

[Gunnar Bittersmann]

@@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 🖖

[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.

[Matthias Apsel]

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