Jquery tabs met buttons en werkende active class

Status
Niet open voor verdere reacties.

AnnysLM

Nieuwe gebruiker
Lid geworden
3 mrt 2011
Berichten
1
Allereerst wil ik even melden dat ik een newby ben met Javascript en Jquery en nu wil ik graag iets maar ik krijg het niet werkend. Ik hoop van harte dat iemand mij kan helpen!

Mijn html:
Code:
<ul class="tabs">
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
<ul>
<div class="tab_container">
	<div id="first" class="tab_content">...</div>
	<div id="second" class="tab_content">...</div>
	<div id="third" class="tab_content">...</div>
	<div id="fourth" class="tab_content">...</div>
	<div id="fifth" class="tab_content">...</div>
</div>

Jquery:
Code:
$(document).ready(function() {
	//When page loads...
	$(".tab_content").hide(); //Hide all content
	$("ul.tabs li:first").addClass("active").show(); //Activate first tab
	$(".tab_content:first").show(); //Show first tab content

	//On Click Event
	$("ul.tabs li").click(function() {

	$("ul.tabs li").removeClass("active"); //Remove any "active" class
	$(this).addClass("active"); //Add "active" class to selected tab
	$(".tab_content").hide(); //Hide all tab content

	var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
	$(activeTab).fadeIn(); //Fade in the active ID content
	return false;

});

Dit heb ik ergens uit een tutorial gehaald en dit werkt prima. Nu heb ik echter besloten dat er in de eerste tab buttons moeten komen die (ook) naar de tweede, derde, vierde, etc. tab moeten linken. Ook dat kreeg ik werkend door de click functie te kopieren en er de .button class in te zetten. Ik heb het volgende na return false; erbij geplakt:

Code:
$(".round .button").click(function() {
		
	$("ul.tabs li").removeClass("active"); //Remove any "active" class
	$(this).addClass("active"); //Add "active" class to selected tab
	$(".tab_content").hide(); //Hide all tab content
	
	var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
	$(activeTab).fadeIn(); //Fade in the active ID content
	return false;
		
	});

Op zich ben ik helemaal gelukkig omdat ook deze extra buttons werken maar... de active class werkt hier niet. Ik ben jquery voor dummies aan het lezen, ik heb gegoogeld, tutorials bekeken en ik kom er niet uit.

Nog een heel andere en laatste vraag: bovenstaande bevind zich op pagina 2 en op mijn index heb ik een link die naar de tweede tab verwijst op pag 2. Je komt via deze link helaas terecht op de eerste tab van pag 2. Kan dit ook worden ingesteld?

Alvast bedankt!

Groetjes,
Annys
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan