Cum învăț ce și cum se face în Javascript/jquery și ajut pe Forumul Bigcommerce cu asemenea coduri iau, pas cu pas, calea unor coduri care mi-au dat mult de furcă în urmă cu numai un an. Degeaba le luam de pe net și vedeam că funcționează dacă nu reușeam să înțeleg CUM.
Acum știu cum funcționează codurile javascript ce le fac eu, așa că dau vorba mai departe 😀
Un tutorial mult mai complex despre taburi în Javascript a scris Iamntz. Aici voi pune numai câteva idei.
Pentru a împarte conținutul unei pagini în mai multe secțiuni aranjate sub forma unor taburi ai nevoie de patru componente:
– codul HTML care va afișa taburile și conținutul
– partea de stiluri CSS care îmbracă frumos taburile și conținutul
– triggerul care va ascunde/afișa conținutul din taburi (de obicei este o acțiune de genul click)
– codul javascript care va face câteva lucruri: va ascunde toate taburile cu excepția celui pe care tocmai ai dat click
Așadar, ia să vedem ce cod HTML avem:
<div class="mctabcontainer"> <ul class="mctabs"> <li class="mctab mcactive">tab1 <li class="mctab">tab2 <li class="mctab">tab3 </ul> <div class="mctabcontents mcopen">Aici avem continutul din tab 1!</div> <div class="mctabcontents">TAB 2 la raport!</div> <div class="mctabcontents">Tabul TREI se holbeaza la tine!</div> </div>
După cum bine vezi avem un div.mctabcontainer care va conține totul: taburi, conținut. Conținutul din taburi va fi afișat relativ la acelst div, așa că grijă mare să nu închizi div-urile când nu trebuie.
Taburile vor fi create cu ajutorul unor elemente li iar conținutul propriu-zis va fi afișat cu ajutorul unor div.mctabcontents. Grijă mare ca să nu uiți asta: trebuie să ai un tab și conținutul acestuia afișate by default. Cu clasa .mcactive am selectat tabul 1 ca să fie cel afișat iar cu clasa .mcopen am ales ca primul div să fie afișat.
Până aici, nu este mare lucru.
Partea de stiluri CSS este, și ea, destul de ușor de înțeles:
<style>.mctabcontainer {
position: relative;
width: 100%;
height: auto;
float: left;
box-sizing: border-box;
margin-bottom: 20px;
}
.mctabs {
width: 100%;
float: left;
clear: both;
margin-top: 20px;
}
.mcactive {
background:#c6d5d5 !important;
}
.mctab {
width: 150px;
padding: 5px;
float: left;
position: relative;
list-style: none !important;
background: #ccc;
text-align: center;
margin: 0 5px 0 5px;
border: solid 1px #bebcbc;
}
.mctab:hover {
background:#c6d5d5;
}
.mctabcontents {
/* position: absolute; */
margin-top: 31px;
margin-left: 35px;
display: none;
width: 90%;
height: auto;
padding: 5px;
margin-bottom: 20px;
border: solid 1px #bebcbc;
}
.mcopen {
display: block;
}
</style>
Câteva precizări sunt necesare:
– conținutul taburilor va fi ascuns by default
– cu clasele mcactive si mcopen voi selecta care tab va fi afișat inițial
– restul sunt poziționări, bordere, culori, float
Acum să vedem ce va activa afișarea altui tab. Când dai click pe unul dintre taburi, atunci rulează codul javascript. Triggerul, adică aici este acțiunea de a da click, este mai jos:
$(".mctab").click(function(){
Când cineva dă click pe unul dintre taburi, atunci rulez o funcție anonimă ce va face următoarele:
<script>
$(".mctab").click(function(){$(".mctab").removeClass("mcactive");
$(this).addClass("mcactive");
$(".mctabcontainer > div.mctabcontents").removeClass("mcopen");
var mcwhatli = $(".mctab").index(this);
mcwhatli = mcwhatli + 1;
$(".mctabcontainer div:nth-of-type(" + mcwhatli + ")").addClass("mcopen");
});
</script>
Codul de mai sus face următoarele:
– înlătură clasa mcactive de la toate taburile, astfel că toate vor fi afișare cu background gri
– adaugă clasa mcactive la tabul la care tocmai am dat click, făcând acest tab activ
– înlătură clasa mcopen de la toate div-urile, ascunzând astfel conținutul de peste tot
– adaugă clasa mcopen la div-ul corespunzător tabului căruia i-am dat click
– mcwhatli află pe ce element li am dat click (notă> funcția index începe numărătoarea de la 0)
– pentru a folosi nth-of-type corect, trebuie să țin cont că acest pseudo-selector începe numerotarea de la 1, nu de la zero, astfel că folosesc mcwhatli = mcwhatli + 1; pentru a face corespondența între elementul li apăsat și div-ul corect.
Mai jos ai DEMO cu taburi:
- tab1
- tab2
- tab3