stalachristian: Javascript Tabs: Direkter Aufruf

Liebe Community,

ich habe mir mittels Javascript eine Seite mit Tabs gebastelt. Ich würde nun gerne wissen, ob es möglich ist, einen Tab direkt zu adressieren.

https://mydomain.com öffnet automatisch den ersten Tab.

https://mydomain.com#tab2 öffnet dann beispw. den zweiten Tab?

<div class="tab">
			<button class="tablinks" onclick="openTab(event, 'Tab1')" id="defaultOpen">erster Tab</button>
			<button class="tablinks" onclick="openTab(event, 'Tab2')" id="defaultOpen">zweiter Tab</button>
			<button class="tablinks" onclick="openTab(event, 'Tab3')" id="defaultOpen">dritter Tab</button>
</div>
function openTab(evt, TabName)
{
	var i, tabcontent, tablinks;
	tabcontent = document.getElementsByClassName("tabcontent");
	for (i = 0; i < tabcontent.length; i++)
	{
		tabcontent[i].style.display = "none";
	}

	tablinks = document.getElementsByClassName("tablinks");
	for (i = 0; i < tablinks.length; i++)
	{
		tablinks[i].className = tablinks[i].className.replace(" active", "");
	}

	document.getElementById(TabName).style.display = "block";
	evt.currentTarget.className += " active";
}

Viele Grüße Christian

  1. Hallo,

    vorweg: du solltest für die Manipulation der Klassen die dafür vorgesehenen Funktionen nehmen.

    Du musst dir Gedanken darüber machen, wie die Seite ohne Javascript aussehen soll. Am einfachsten machst du alle Tabs sichtbar und versteckst per Javascript alle bis auf den einen, der sichtbar sein soll.

    Zu deinem Problem: Du kannst nach dem Laden der Seite (DOMContentLoaded) den Hash abfragen und dann die Funktion openTab aufrufen. So werden dann auch die anderen Tabs versteckt.

    Hier ein paar Links zur Doku:

    Gruß
    Jürgen

    1. @@JürgenB

      vorweg: du solltest für die Manipulation der Klassen die dafür vorgesehenen Funktionen nehmen.

      Du meinst die Methoden von Element.classList.

      Du musst dir Gedanken darüber machen, wie die Seite ohne Javascript aussehen soll.

      Das auch. Aber du musst dir auch Gedanken darüber machen, wie die Seite ohne Aussehen präsentiert werden soll. Oder richtiger: dem Aussehen adäquat.

      Und wenn man dann die nötigen ARIA-Attribute richtig verwendet, braucht man keine Klassen.

      LLAP 🖖

      --
      „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
      „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

      —Marc-Uwe Kling
  2. @@stalachristian

    ich habe mir mittels Javascript eine Seite mit Tabs gebastelt.

    Bei Tabs gibt es mehr zu tun als nur die visuelle Darstellung umszuschalten. Heydon Pickering hat das im Artikel Tabbed Interfaces (Inclusive Components) gut beschrieben und ein funktionierendes Beispiel vorgestellt.

    Ich würde nun gerne wissen, ob es möglich ist, einen Tab direkt zu adressieren.

    Dazu wäre in dem Beispiel in den letzten Zeilen des unobtrusive JavaScripts unter
    // Initially activate the first tab and reveal the first tab panel
    die 0 in die gewünschten Tabnummer zu ändern (d.h. von außen als Parameter zu übergeben).

    LLAP 🖖

    --
    „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
    „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

    —Marc-Uwe Kling