Onglet qui ne change pas

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

Résolu Onglet qui ne change pas

Message par cricri364 Dim 24 Juil 2011, 13:48

Bonjour,

Alors j'ai cherché sur le forum est j'ai trouvé ce sujet :
https://forum.forumactif.com/t284871p30-faire-des-onglets-sur-la-page-d-acceuil
Cela correspond a ma demande sauf que je n'arrive pas du tout a changer d'onglet en cliquant dessus.

Voici la page d'accueil:
Code:
<script src="http://pmsc.free.fr/J04/10912150254.js"></script><div id="mes_onglets">
    <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Onglet 1</li>
        <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Onglet 2</li>
        <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Onglet 3</li>
        <li id="o_4" class="mon_onglet" onclick="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></ul>

Le CSS:

Code:
ul, li{
  list-style: none;
}
.mon_onglet{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #333;
  background: #d8f8ca;
  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: #b8efa1;
  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: #b8efa1;
  border: 1px solid #68ce3e;
  padding: 10px;
        margin: -1px;           
}
#mes_contenus, #mes_onglets{
  width: 400px;
}

Merci d'avance pour votre aide.


Dernière édition par cricri364 le Lun 25 Juil 2011, 13:36, édité 2 fois
cricri364

cricri364
***

Messages : 158
Inscrit(e) le : 27/04/2009

http://letters-to-juliet.forumgratuit.org
cricri364 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Onglet qui ne change pas

Message par Invité Dim 24 Juil 2011, 13:55

Bonjour,

Pour que vos onglets fonctionnent, supprimez cette ligne dans votre message d'accueil:
Code:
<script src="http://pmsc.free.fr/J04/10912150254.js"></script>

Puis dans Panneau d'admin > Modules > Gestion des codes Javascript , créer un nouveau code Javascript. Donnez lui le nom que vous voulez, cochez "Sur l'index" et collez ceci:
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';
            }
        }
    }           
}
Validez.

Cordialement.
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Onglet qui ne change pas

Message par cricri364 Dim 24 Juil 2011, 14:15

Merci beaucoup ! Very Happy

Dernière petite question :p
Il est possible de supprimer le cadre jaune et le fond gris?
Spoiler:

Merci d'avance !
cricri364

cricri364
***

Messages : 158
Inscrit(e) le : 27/04/2009

http://letters-to-juliet.forumgratuit.org
cricri364 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Onglet qui ne change pas

Message par Invité Dim 24 Juil 2011, 14:24

C'est possible si vous avez accès aux templates. Quelle est la version de votre forum?

Cordialement.
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Onglet qui ne change pas

Message par cricri364 Dim 24 Juil 2011, 14:38

Oui j'ai accès aux templates et la version du forum est : phpBB2 !
J'espère que c'était ça le numéros de version Rolling Eyes
cricri364

cricri364
***

Messages : 158
Inscrit(e) le : 27/04/2009

http://letters-to-juliet.forumgratuit.org
cricri364 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Onglet qui ne change pas

Message par Invité Dim 24 Juil 2011, 21:32

Bonsoir,

Dans ce cas, repérez au début du template Index_body la partie qui gère le message d'accueil:
Code:
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <!-- BEGIN message_admin_titre -->
   <tr>
      <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
   </tr>
   <!-- END message_admin_titre -->
   <!-- BEGIN message_admin_txt -->
   <tr>
      <td class="row1" rowspan="3" align="center" valign="middle">
      <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
      </td>
   </tr>
   <!-- END message_admin_txt -->
</table>
Et remplacez par:
Code:
<table class="" width="100%" border="0" cellspacing="1" cellpadding="0">
   <!-- BEGIN message_admin_titre -->
   <tr>
      <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
   </tr>
   <!-- END message_admin_titre -->
   <!-- BEGIN message_admin_txt -->
   <tr>
      <td class="" rowspan="3" align="center" valign="middle">
      <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
      </td>
   </tr>
   <!-- END message_admin_txt -->
</table>
J'ai retiré les class du tableau et de la cellule.

Cordialement.
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Onglet qui ne change pas

Message par cricri364 Lun 25 Juil 2011, 13:02

Merci c'est parfait Very Happy Very Happy
cricri364

cricri364
***

Messages : 158
Inscrit(e) le : 27/04/2009

http://letters-to-juliet.forumgratuit.org
cricri364 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