Modification d'un script d'onglets jQuery
Shakadelavierge
Messages postés
2688
Statut
Contributeur
-
Dj Nam Messages postés 339 Statut Membre -
Dj Nam Messages postés 339 Statut Membre -
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:
Dans le corps de la page: code HTML:
Merci de votre aide.
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
- Modification dns - Guide
- Restaurer les onglets chrome - Guide
1 réponse
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) :
Maxime
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