Probleme affichage par onglet

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Probleme affichage par onglet

Message par jehanne Mer 16 Fév 2011 - 15:52

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é

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>
hors le soucis c'est que seul l'onglet 1 est actif , les autres ne s'activent pas au passage de la souris , et depuis hier soir j'ai beau cherché partout sur le forum et essayer de bidouiller , rien n'y fait , j'aimerai bien que cela fonctionne afin que je puisse continuer a personnaliser les onglets via le CSS , car si je dois laisser tomber je veux pas commencer a faire en detail ..... une idée du soucis ? Confused

Merci a vous pour votre aide ....


Dernière édition par jehanne le Ven 18 Fév 2011 - 15:01, édité 1 fois
jehanne

jehanne
**

Féminin
Messages : 53
Inscrit(e) le : 11/09/2007

http://creations-debutants.forums-actifs.com/index.htm
jehanne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Probleme affichage par onglet

Message par jehanne Ven 18 Fév 2011 - 9:20

juste un p'ti up , probleme toujours pas resolu..... Embarassed

personne a deja rencontrer ce soucis ? fallait que ça tombe sur moi hein tongue
jehanne

jehanne
**

Féminin
Messages : 53
Inscrit(e) le : 11/09/2007

http://creations-debutants.forums-actifs.com/index.htm
jehanne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Probleme affichage par onglet

Message par Lixyr Ven 18 Fév 2011 - 10:29

Bonjour.


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)
onglets.js
(entre autre)
- 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>
Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7377
Inscrit(e) le : 22/07/2010

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Probleme affichage par onglet

Message par jehanne Ven 18 Fév 2011 - 15:01

Bouarf quel bazar que ce que vous avez obtenu avec mon fichier hébergé Shocked
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 !

cheers

Bonne fin de journée et bon week end , probleme résolu , j'edite .
jehanne

jehanne
**

Féminin
Messages : 53
Inscrit(e) le : 11/09/2007

http://creations-debutants.forums-actifs.com/index.htm
jehanne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Probleme affichage par onglet

Message par Lixyr Ven 18 Fév 2011 - 15:05

Merci beaucoup. A vous aussi ! Razz


Pour faciliter les recherches, mettez un titre explicite.
Remerciez Probleme affichage par onglet  976083691 le message qui vous a aidé pour que celui-ci soit mis en évidence.
Épinglez votre sujet en résolu Probleme affichage par onglet  3592387030 pour prévenir la modération.

Probleme affichage par onglet  Baston10
Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7377
Inscrit(e) le : 22/07/2010

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum