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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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.