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:
Jquery:
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:
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
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