Modification d'un script d'onglets jQuery [Fermé]

Signaler
Messages postés
2695
Date d'inscription
jeudi 11 mars 2004
Statut
Contributeur
Dernière intervention
12 octobre 2012
-
Dj Nam
Messages postés
327
Date d'inscription
mardi 9 octobre 2007
Statut
Membre
Dernière intervention
31 janvier 2014
-
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:

  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:

  <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.




_____Shaka_____   
 Memento Mori

1 réponse

Messages postés
327
Date d'inscription
mardi 9 octobre 2007
Statut
Membre
Dernière intervention
31 janvier 2014
41
Bonjour,

Une solution serait d'arriver sur une URL qui utilise une ancre par exemple :
www.tonsite.fr/#onglet2

Et avec jQuery tu peux récupérer l'ancre comme ca : (je ne sais pas si c'est ce qu'il y a de plus propre, mais ca fonctionne) :
var ancre = document.location.href.split('#')[1];
Ensuite il ne te reste qu'à simuler un clic sur l'onglet en question avec ceci :
var liID = ancre.replace('page', 'Header');  
$('li#'+liID).click();
Et voilà qui devrait te permettre d'arriver à tes fins.
Maxime