Discussion :

[xavjl]

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.

[SpaceFrog]

Jquery etant du javascript, il ne survit pas à un rechargement de page
L'état des onglets n'est donc pas transmis d'une page à l'autre

Tu peux soit:

stocker l'etat des onglets dans un cookie et ainsi le recupérer d'une page sur l'autre

stocker l'état des onglets dans le localstorage pour les navigateurs les plus récents

passer l'etat des onglets d'un page à l'autre en get (dans l'url) ou en post (form)


Toutes ces solutions supposent que la page de destination ait une procédure au démarrage pour aller récupérer l'état des onglets et l'appliquer aux onglets de la page

[Bovino]

Et pour info, ton script n'a rien à voir avec jQuery...