[HTML] Ancre et onglet js

Salut,

voilà j'ai une page index sur lesquels j'ai des liens qui devrait m'amener sur une autre page qui contient plusieurs onglet avec du contenu à l’intérieur donc voilà le code de la page index.html :

<div id="miacc"><a href="groupe.html#Mi"><img src="img/mi.jpg" alt="loic" /></a></div>
        <div id="vincacc"><a href="groupe.html#Vinc"><img src="img/vinc.jpg" alt="vinc" /></a></div>
        <div id="dimacc"><a href="groupe.html#Dim"><img src="img/dim.jpg" alt="Dim" /></a></div>
        <div id="antoiacc"><a href="groupe.html#Loic"><img src="img/loic.jpg" alt="loic" /></a></div>
        <div id="loicacc"><a href="groupe.html#Ant"><img src="img/ant.jpg" alt="ant" /></a></div>

et la page groupe.html

<div id="contenu">
    
      <div id="TabbedPanels1" class="TabbedPanels">
        <ul class="TabbedPanelsTabGroup">
          <li class="TabbedPanelsTab" tabindex="0" >Le groupe</li>
          <li class="TabbedPanelsTab" tabindex="1" id="#Mi">Mi </li>
          <li class="TabbedPanelsTab" tabindex="2" id="#Dim">Dimitri </li>
          <li class="TabbedPanelsTab" tabindex="3" id="#Loic">Loic </li>
          <li class="TabbedPanelsTab" tabindex="4" id="#Ant">Onglet 5</li>
          <li class="TabbedPanelsTab" tabindex="5" id="#Vinc">Onglet 6</li>
        </ul>
        <div class="TabbedPanelsContentGroup">
              <div class="TabbedPanelsContent">
                <div id="Groupe">   
                    <img src="img/migroupe.jpg" /> 
                    <div class="ContenuG"> blablabla </div>
                    <div class="ContenuD">
                    </div>
                </div>
            </div>
            <div class="TabbedPanelsContent">
                <div>   
                    <img src="img/migroupe.jpg" />         
                    <div class="ContenuG"> blablabla </div>
                    <div class="ContenuD">
                    </div>
                </div>
            </div>
            <div class="TabbedPanelsContent">
                <div id="Dim">   
                    <img src="img/dimgroupe.jpg" /> 
                    <div class="ContenuG"> blablabla </div>
                    <div class="ContenuD">
                    </div>
               </div>
            </div>
            <div class="TabbedPanelsContent">
                <div id="Loic">   
                    <img src="img/loicgroupe.jpg" /> 
                    <div class="ContenuG"> blablabla </div>
                    <div class="ContenuD">
                    </div>
                </div>
            </div>
            <div class="TabbedPanelsContent">
                <div id="Vincent">   
                    <img src="img/vincentgroupe.jpg" /> 
                    <div class="ContenuG"> blablabla </div>
                    <div class="ContenuD">
                    </div>
                </div>
            </div>
            <div class="TabbedPanelsContent">
                <div id="Antoine">   
                    <img src="img/migroupe.jpg" /> 
                    <div class="ContenuG"> blablabla </div>
                    <div class="ContenuD">
blabla
                    </div>
                </div>
            </div>
      </div>
</div>

Mais ça me met juste que le premier onglet [:wark0]
Modifié par wazany (16 Jan 2012 - 08:51)

Salut salut,

Tout d'abord sache que tu peux (dois ^^) baliser ton code pour une lecture plus facile (plus l'énoncé est clair plus la réponse sera rapide).

Pour ton problème je crois que tu t'es un peu enmelé les pinceaux. Si j'ai bien compris tu souhaites que quand on clique sur ton menu on soit amener aux div de class TabbedPanelsContent ?

Si c'est le cas il y a des erreurs du type :

<a href="groupe.html#Vinc"><img src="img/vinc.jpg" alt="vinc" /></a>

ne peut conduire vers

<div class="TabbedPanelsContent">
<div id="Vincent">
<img src="img/vincentgroupe.jpg" />
<div class="ContenuG"> blablabla </div>
<div class="ContenuD">
</div>
</div>
</div>

Car d'un côté tu as mis une ancre nommé #vinc et de l'autre tu appels ton id Vincent.

De plus ici :

<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0" >Le groupe</li>
<li class="TabbedPanelsTab" tabindex="1" id="#Mi">Mi </li>
<li class="TabbedPanelsTab" tabindex="2" id="#Dim">Dimitri </li>
<li class="TabbedPanelsTab" tabindex="3" id="#Loic">Loic </li>
<li class="TabbedPanelsTab" tabindex="4" id="#Ant">Onglet 5</li>
<li class="TabbedPanelsTab" tabindex="5" id="#Vinc">Onglet 6</li>
</ul>

Tu as mis des id qui commence par un # c'est une erreur.

developer.mozilla.org a écrit :
L'utilisation d'autre caractères que les lettres et chiffres ASCII, "_", "-" et "." peut causer des problèmes de compatibilité, car ils n'ont pas été autorisés dans le HTML 4. Bien que cette restriction a été levée dans HTML 5, un ID doit commencer par une lettre pour être compatible.

Modifié par Gili (14 Jan 2012 - 12:28)

Gili a écrit :
Salut salut,

Tout d'abord sache que tu peux (dois ^^) baliser ton code pour une lecture plus facile (plus l'énoncé est clair plus la réponse sera rapide).

Je m'en suis rendu trop tard pour le balisage et pas trouvé le moyen d'edité

Mais sinon j'ai corrigé mes erreurs mais j'ai toujours ce problème apparemment il faut faire intervenir le script js ( script utilisé via Dreamweaver patapay svp ^^) mais je suis un poilou largué la je voie pas comment faire cela

wazany a écrit :
Je m'en suis rendu trop tard pour le balisage et pas trouvé le moyen d'edité ohwell

Il y a une petite icône en haut à droite de ton poste qui te permet d'éditer (à côté de «citer»).

Pour faire ce que tu veux faire (si j'ai bien compris du moins) il n'y a pas besoin de JS, juste de l'HTML. Sinon tu peux recopier ton code qu'on voit de quoi ça à l'air maintenant.
Modifié par Gili (15 Jan 2012 - 20:24)