Javascript Tabs: Direkter Aufruf

[stalachristian]

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

[JürgenB]

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:

• https://wiki.selfhtml.org/wiki/JavaScript/DOM/EventTarget/addEventListener
• https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/DOMContentLoaded
• https://wiki.selfhtml.org/wiki/JavaScript/DOM/Element/classList
• https://wiki.selfhtml.org/wiki/JavaScript/Location/hash

Gruß
Jürgen

[Gunnar Bittersmann]

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

[Gunnar Bittersmann]

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