Probleme affichage par onglet
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Probleme affichage par onglet
Bonjour
Je viens auprès de vous chercher de l'aide , j'explique mon soucis , je voudrais faire un affichage par onglet pour l'accueil de mon forum j'ai suivi ce tuto fort bien detaillé : https://forum.forumactif.com/t285426-de-quel-facon-faire-des-onglets?highlight=onglets
j'ai donc collé ce code dans PA > Affichage> Généralité
celui ci dans la feuille de style CSS
et heberger ceci en fichier .js
ce qui au final dans mon message de page d'accueil donne ceci une fois l'adresse du fichier hebergé incluse
Merci a vous pour votre aide ....
Je viens auprès de vous chercher de l'aide , j'explique mon soucis , je voudrais faire un affichage par onglet pour l'accueil de mon forum j'ai suivi ce tuto fort bien detaillé : https://forum.forumactif.com/t285426-de-quel-facon-faire-des-onglets?highlight=onglets
j'ai donc collé ce code dans PA > Affichage> Généralité
- Code:
<script src="http://sd-1.archive-host.com/membres/up/77252600546618716/onglet.js"></script><div id="mes_onglets">
<ul><li id="o_1" class="mon_onglet_selected" onmouseover="changeOnglet(this);">Onglet 1</li>
<li id="o_2" class="mon_onglet" onmouseover="changeOnglet(this);">Onglet 2</li>
<li id="o_3" class="mon_onglet" onmouseover="changeOnglet(this);">Onglet 3</li>
<li id="o_4" class="mon_onglet" onmouseover="changeOnglet(this);">Onglet 4</li></ul>
<div class="clear"><div id="mes_contenus">
<div id="co_1" class="mon_contenu">Mon contenu 1</div>
<div id="co_2" class="mon_contenu" style="display: none;">Mon contenu 2</div>
<div id="co_3" class="mon_contenu" style="display: none;">Mon contenu 3</div>
<div id="co_4" class="mon_contenu" style="display: none;">Mon contenu 4</div>
</div>
celui ci dans la feuille de style CSS
- Code:
ul, li{
list-style: none;
}
.mon_onglet{
float: left;
padding: 2px 10px;
margin-right: 5px;
color: #333;
background: #f0e8ff;
border: 1px solid #68ce3e;
cursor: pointer;
margin-bottom: -1px;
}
.mon_onglet:hover{
background: #b8efa1;
}
.mon_onglet_selected{
float: left;
padding: 2px 10px;
margin-right: 5px;
color: #333;
background: #f0e8ff;
border-top: 1px solid #68ce3e;
border-right: 1px solid #68ce3e;
border-left: 1px solid #68ce3e;
border-bottom: 1px solid #b8efa1;
cursor: pointer;
margin-bottom: -1px;
}
.clear{
clear: both;
}
.mon_contenu{
color: #666;
background: #f0e8ff;
border: 1px solid #68ce3e;
padding: 10px;
margin: -1px;
}
#mes_contenus, #mes_onglets{
width: 400px;
}
et heberger ceci en fichier .js
- Code:
function changeOnglet(_this){
var getOnglets = document.getElementById('mes_onglets').getElementsByTagName('li');
for(var i = 0; i < getOnglets.length; i++){
if(getOnglets[i].id){
if(getOnglets[i].id == _this.id){
getOnglets[i].className = 'mon_onglet_selected';
document.getElementById('c' + _this.id).style.display = 'block';
}
else{
getOnglets[i].className = 'mon_onglet';
document.getElementById('c' + getOnglets[i].id).style.display = 'none';
}
}
}
}
ce qui au final dans mon message de page d'accueil donne ceci une fois l'adresse du fichier hebergé incluse
- Code:
<script src="http://sd-1.archive-host.com/membres/up/77252600546618716/onglet.js"></script><div id="mes_onglets">
<ul><li id="o_1" class="mon_onglet_selected" onmouseover="changeOnglet(this);">Onglet 1</li>
<li id="o_2" class="mon_onglet" onmouseover="changeOnglet(this);">Onglet 2</li>
<li id="o_3" class="mon_onglet" onmouseover="changeOnglet(this);">Onglet 3</li>
<li id="o_4" class="mon_onglet" onmouseover="changeOnglet(this);">Onglet 4</li></ul>
<div class="clear"><div id="mes_contenus">
<div id="co_1" class="mon_contenu">Mon contenu 1</div>
<div id="co_2" class="mon_contenu" style="display: none;">Mon contenu 2</div>
<div id="co_3" class="mon_contenu" style="display: none;">Mon contenu 3</div>
<div id="co_4" class="mon_contenu" style="display: none;">Mon contenu 4</div>
</div>
Merci a vous pour votre aide ....
Dernière édition par jehanne le Ven 18 Fév 2011 - 15:01, édité 1 fois
Re: Probleme affichage par onglet
juste un p'ti up , probleme toujours pas resolu.....
personne a deja rencontrer ce soucis ? fallait que ça tombe sur moi hein
personne a deja rencontrer ce soucis ? fallait que ça tombe sur moi hein
Re: Probleme affichage par onglet
Bonjour.
C'est votre fichier hébergé qui ne marche pas. Vérifiez que vous avez bien hébergé le bon contenu :
dans son entier, et que vous ne vous êtes pas trompé en copiant le code, parce que moi je vois ça dans votre fichier hébergé :
RAPPEL DE COMMENT ON HÉBERGE UN CONTENU EN .js :
- On ouvre le bloc note
- On copie le code dedans
- on clique sur Fichier, enregistrer sous
- on tape entièrement dans le champ nom du fichier (donc on retire le *.txt qui s'affiche par défaut)
- on clique sur enregistrer
_____________________________
Petit ps :
Il manquait des div dans le code, et le /ul de fermeture était mal placé. Je remets ici le code dans son ensemble :
C'est votre fichier hébergé qui ne marche pas. Vérifiez que vous avez bien hébergé le bon contenu :
- Code:
function changeOnglet(_this){
var getOnglets = document.getElementById('mes_onglets').getElementsByTagName('li');
for(var i = 0; i < getOnglets.length; i++){
if(getOnglets[i].id){
if(getOnglets[i].id == _this.id){
getOnglets[i].className = 'mon_onglet_selected';
document.getElementById('c' + _this.id).style.display = 'block';
}
else{
getOnglets[i].className = 'mon_onglet';
document.getElementById('c' + getOnglets[i].id).style.display = 'none';
}
}
}
}
dans son entier, et que vous ne vous êtes pas trompé en copiant le code, parce que moi je vois ça dans votre fichier hébergé :
- Code:
{\rtf1\ansi\ansicpg1252\deff0\deflang1036{\fonttbl{\f0\fswiss\fcharset0 Arial;}}
{\*\generator Msftedit 5.41.15.1515;}\viewkind4\uc1\pard\f0\fs20 function changeOnglet(_this)\{\par
var getOnglets = document.getElementById('mes_onglets').getElementsByTagName('li');\par
for(var i = 0; i < getOnglets.length; i++)\{\par
if(getOnglets[i].id)\{\par
if(getOnglets[i].id == _this.id)\{\par
getOnglets[i].className = 'mon_onglet_selected';\par
document.getElementById('c' + _this.id).style.display = 'block';\par
\}\par
else\{\par
getOnglets[i].className = 'mon_onglet';\par
document.getElementById('c' + getOnglets[i].id).style.display = 'none';\par
\}\par
\}\par
\} \par
\}\par
}
�
RAPPEL DE COMMENT ON HÉBERGE UN CONTENU EN .js :
- On ouvre le bloc note
- On copie le code dedans
- on clique sur Fichier, enregistrer sous
- on tape entièrement dans le champ nom du fichier (donc on retire le *.txt qui s'affiche par défaut)
(entre autre)onglets.js
- on clique sur enregistrer
_____________________________
Petit ps :
Il manquait des div dans le code, et le /ul de fermeture était mal placé. Je remets ici le code dans son ensemble :
- Code:
<script src="URL DU FICHER HEBERGE.js"></script>
<div id="mes_onglets">
<ul>
<li id="o_1" class="mon_onglet_selected" onmouseover="changeOnglet(this);">Onglet 1</li>
<li id="o_2" class="mon_onglet" onmouseover="changeOnglet(this);">Onglet 2</li>
<li id="o_3" class="mon_onglet" onmouseover="changeOnglet(this);">Onglet 3</li>
<li id="o_4" class="mon_onglet" onmouseover="changeOnglet(this);">Onglet 4</li>
<div class="clear"><div id="mes_contenus">
<div id="co_1" class="mon_contenu">Mon contenu 1</div>
<div id="co_2" class="mon_contenu" style="display: none;">Mon contenu 2</div>
<div id="co_3" class="mon_contenu" style="display: none;">Mon contenu 3</div>
<div id="co_4" class="mon_contenu" style="display: none;">Mon contenu 4</div>
</div></div>
</ul></div>
Re: Probleme affichage par onglet
Bouarf quel bazar que ce que vous avez obtenu avec mon fichier hébergé
pourtant j'ai fait exactement la même manip que ce que je viens de refaire
En tout les cas un gros et énorme merci d'avoir preté attention a mon soucis !!! parce que ça marche !
Bonne fin de journée et bon week end , probleme résolu , j'edite .
pourtant j'ai fait exactement la même manip que ce que je viens de refaire
En tout les cas un gros et énorme merci d'avoir preté attention a mon soucis !!! parce que ça marche !
Bonne fin de journée et bon week end , probleme résolu , j'edite .
Re: Probleme affichage par onglet
Merci beaucoup. A vous aussi !
♢ Pour faciliter les recherches, mettez un titre explicite.
♢ Remerciez le message qui vous a aidé pour que celui-ci soit mis en évidence.
♢ Épinglez votre sujet en résolu pour prévenir la modération.
Sujets similaires
» Problème d'affichage PA en onglet
» Problème d'onglet et leur affichage.
» Problème affichage onglet message d'accueil
» Problème d'affichage du contenu des onglets contenant les infos de profil dans la page d'affichage des sujets
» Soucis onglet affichage
» Problème d'onglet et leur affichage.
» Problème affichage onglet message d'accueil
» Problème d'affichage du contenu des onglets contenant les infos de profil dans la page d'affichage des sujets
» Soucis onglet affichage
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum