Onglets

[Poupou]

Bonjour !

Voila, je suis en train de mettre en place ma page d'accueil. En modifiant le contenu du premier onglet sur ma page d'accueil, impossible d'ouvrir les autres ! Venez voir par vous même, le contenu ne change plus --" ICI

Code de la PA:

Code:

<div id="mes_onglets">
    <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Accueil</li>
        <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">News & Event</li>
        <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Staff</li>
        <li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Amis & Remerciements</li>
        <div class="clear"><div id="mes_contenus">
    <div id="co_1" class="mon_contenu">Bienvenue !<br>
        <table>
      <tr>
        <td>
          <p>Quae dum ita struuntur, indicatum est apud Tyrum indumentum regale textum occulte, incertum quo locante vel cuius usibus apparatum. ideoque rector provinciae tunc pater Apollinaris eiusdem nominis ut conscius ductus est aliique congregati sunt ex diversis civitatibus multi, qui atrocium criminum ponderibus urgebantur.<br>
          Toi et moi c'est pour la vie je l'espère.</p>
        </td>
        <td>
          <IMG SRC="http://i24.servimg.com/u/f24/15/74/75/68/fc028j11.jpg">
        </td>
            </tr>
        </table>
        </center>
    <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>

[Invité]

Bonjour,

Il manque une ligne sur votre page d'accueil pour que les onglets fonctionnent.

Code:

<script src="ADRESSE_DU_FICHIER.js"></script>

Voici le script à enregistrer en .js et à héberger:

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';
            }
        }
    }         
}

Cordialement.

[Poupou]

Merci de votre réponse.

Ca ne fonctionne toujours pas ... Je ne dois pas être doué.

https://sd-2.archive-host.com/membres/up/113965783930418818/codagepa.js

J'ai pourtant bien rentré le code que vous m'aviez donné, mais le contenu des autres pages disparaissent maintenant.

[Invité]

Bonjour,

Le contenu disparait parce que le bloc contenu de votre premier onglet n'est pas fermé. Il est nécessaire de bien fermer les balises pour que le système fonctionne. En ajoutant</div> juste après </center> le contenu des autres onglets réapparait.

Code:

<script src="http://sd-2.archive-host.com/membres/up/113965783930418818/codagepa.js"></script><div id="mes_onglets">
    <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Accueil</li>
        <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">News & Event</li>
        <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Staff</li>
        <li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Amis & Remerciements</li>
        <div class="clear"><div id="mes_contenus">
    <div id="co_1" class="mon_contenu">Bienvenue !<br>
        <center><table>
      <tr>
        <td>
          <p>Quae dum ita struuntur, indicatum est apud Tyrum indumentum regale textum occulte, incertum quo locante vel cuius usibus apparatum. ideoque rector provinciae tunc pater Apollinaris eiusdem nominis ut conscius ductus est aliique congregati sunt ex diversis civitatibus multi, qui atrocium criminum ponderibus urgebantur.<br>
          Toi et moi c'est pour la vie je l'espère.</p>
        </td>
        <td>
          <IMG SRC="http://i24.servimg.com/u/f24/15/74/75/68/fc028j11.jpg">
        </td>
            </tr>
        </table>
        </center></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></ul>

Cordialement.

[Poupou]

Merci beaucoup Isolde !