Zum Inhalt springen

Tab-Menü Position beibehalten


Cole

Empfohlene Beiträge

Ich habe ein Tab-Menü am unteren Ende der Seite. Um zu diesem zu kommen muss man scrollen. Wenn ich jetzt ein Tab anklicke, springt die Seite nach oben, so das nur noch die Zeile mit den Tabs zu sehen ist. Wenn ich jetzt den Inhalt des Tabs das ich ausgewählt habe sehen möchte, muss ich wieder runter scrollen. Was kann ich machen damit die Seite an der Postion bleibt, an der ich mich befinde bevor ich ein Tab anklicke?

Link zu diesem Kommentar
Auf anderen Seiten teilen

  • 2 Wochen später...

Hier der Code:

<div id="tab-1" class="tabs" title="Tab 1">
Script
function tabs(pages) {


	if (!pages.length) return;


	pages.addClass("dyn-tabs");

	pages.first().show();


	var tabNavigation = $('<ul id="tabs" />').insertBefore(pages.first());


	pages.each(function() {

		var listElement = $("<li />");

		var label = $(this).attr("title") ? $(this).attr("title") : "Kein Label";

		listElement.text(label);

		tabNavigation.append(listElement);

	});


	var items = tabNavigation.find("li");

	items.first().addClass("current");


	items.click(function() {

		items.removeClass("current");

		$(this).addClass("current");

		pages.hide();

		pages.eq($(this).index()).fadeIn("slow");

	});


}



$(document).ready(function(){	


	tabs($("div.tabs"));


});

Link zu diesem Kommentar
Auf anderen Seiten teilen

  • 3 Wochen später...

Hi,

warum nimmst du nicht einfach die Tabs von JQueryUI, wenn du schon eh Jquery verwendest ^^

Aber wenn du bestimmte Gründe dafür hast, dann kann ich dir vllt helfen, wenn ich genau weiß, was du willst ^^

Also du hast eine Seite mit Inhalt ganz unten hast du dann Tabs, wenn du draufklickst auf einen Tab, willst du das drunter???? Inhalt angezeigt wird vom aktuellen (div)tab oder wie? Und bei dir ist es momentan so, dass du beim Klick nach oben kommst zum Seitenanfang und dann wieder runter scrollen musst um den Inhalt des (div)tabs zu sehen!?? Verstehe ich dich da richtig!?

Nach deinem Code zu urteilen, müsste dein "erstellter" HTML CODE so ausschauen


<ul>

<li class="current">Tab 1</li>

<li>Tab 2</li>

</ul>

<div id="tab-1" class="tabs" title="Tab 1">

Mein Tab-Inhalt

</div>


<div id="tab-2" class="tabs" title="Tab 2">

Mein Tab-Inhalt 2

</div>

Bei Klick auf Tab-2 wird der erste Div ausgeblendet und der zweite eingeblendet....

Link zu diesem Kommentar
Auf anderen Seiten teilen

Dein Kommentar

Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.

Gast
Auf dieses Thema antworten...

×   Du hast formatierten Text eingefügt.   Formatierung wiederherstellen

  Nur 75 Emojis sind erlaubt.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Dein vorheriger Inhalt wurde wiederhergestellt.   Editor leeren

×   Du kannst Bilder nicht direkt einfügen. Lade Bilder hoch oder lade sie von einer URL.

Fachinformatiker.de, 2024 by SE Internet Services

fidelogo_small.png

Schicke uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Fachinformatiker.de App

Download on the App Store
Get it on Google Play

Kontakt

Hier werben?
Oder sende eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...