Sujet Précédent Sujet Suivant

Modification d'un script d'onglets jQuery

Fermé
Shakadelavierge Messages postés 2687 Date d'inscription jeudi 11 mars 2004 Statut Contributeur Dernière intervention 12 octobre 2012 - Modifié par Shakadelavierge le 12/10/2012 à 17:06
Dj Nam Messages postés 327 Date d'inscription mardi 9 octobre 2007 Statut Membre Dernière intervention 31 janvier 2014 - 12 oct. 2012 à 22:30
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
A voir également:

1 réponse

Réponse 1 / 1
Dj Nam Messages postés 327 Date d'inscription mardi 9 octobre 2007 Statut Membre Dernière intervention 31 janvier 2014 41
Modifié par Dj Nam le 12/10/2012 à 22:31
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
0

Discussions similaires

Comment supprimer les onglets?
VictimeDeLinformatique -
VictimeDeLinformatique -

2 réponses