Modification d'un script d'onglets jQuery
Bonjour,
je me permet de poster ici car j'ai un casse tête à résoudre avec un script jquery d'onglets.
Le script marche parfaitement bien, mais j'aurai souhaité que les onglets soient accessibles (en plus de l'être par la page sur laquelle ils se trouvent) par des liens directs sur d'autres pages.
Je vous joint le code de la page qui contient les onglets:
Dans le header, appel au script:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
| window.onload=function() {
// get tab container
var container = document.getElementById("tabContainer");
// set current tab
var navitem = container.querySelector(".tabs ul li");
//store which tab we are on
var ident = navitem.id.split("_")[1];
navitem.parentNode.setAttribute("data-current",ident);
//set current tab with class of activetabheader
navitem.setAttribute("class","tabActiveHeader");
//hide two tab contents we don't need
var pages = container.querySelectorAll(".tabpage");
for (var i = 1; i < pages.length; i++) {
pages[i].style.display="none";
}
//this adds click event to tabs
var tabs = container.querySelectorAll(".tabs ul li");
for (var i = 0; i < tabs.length; i++) {
tabs[i].onclick=displayPage;
}
}
// on click of one of tabs
function displayPage() {
var current = this.parentNode.getAttribute("data-current");
//remove class of activetabheader and hide old contents
document.getElementById("tabHeader_" + current).removeAttribute("class");
document.getElementById("tabpage_" + current).style.display="none";
var ident = this.id.split("_")[1];
//add class of activetabheader to new active tab and show contents
this.setAttribute("class","tabActiveHeader");
document.getElementById("tabpage_" + ident).style.display="block";
this.parentNode.setAttribute("data-current",ident);
} |
Dans le corps de la page: code HTML:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <div id="tabContainer">
<div class="tabs">
<ul>
<li id="tabHeader_1">Onglet 1</li>
<li id="tabHeader_2">Onglet 2</li>
<li id="tabHeader_3">Onglet 3</li>
</ul>
</div>
<div id="tabscontent">
<div class="tabpage" id="tabpage_1">
[Contenu]
</div>
<div class="tabpage" id="tabpage_2">
[Contenu]
</div>
<div class="tabpage" id="tabpage_3">
[Contenu]
</div>
</div>
</div> |
Merci de votre aide.
