Modification d'un script d'onglets jQuery

Shakadelavierge Messages postés 2687 Date d'inscription Statut Contributeur Dernière intervention -
Dj Nam Messages postés 327 Date d'inscription Statut Membre Dernière intervention - 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:

Modification d'un script d'onglets jQuery
Suivi de modification word - Guide
Script vidéo youtube - Guide
Logiciel gratuit modification pdf - Guide
Restaurer onglets chrome - Guide
Modification dns - Guide

1 réponse

Réponse 1 / 1

Dj Nam Messages postés 327 Date d'inscription Statut Membre Dernière intervention 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

Discussions similaires

Changer la couleur de fond d'un en-tête

recherche script "les visiteurs"

Votre réponse

Discussions similaires