IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

HTML Discussion :

Encore une question d'onglets


Sujet :

HTML

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Profil pro
    Inscrit en
    Juin 2004
    Messages
    20
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2004
    Messages : 20
    Par défaut Encore une question d'onglets
    Bonjour,

    Je me pose une question concernant des onglets.
    J'ai un tableau avec 3 onglets.
    Chaque onglets présente un contenu du tableau différent.
    Seulement, la page est rechargée à chaque fois que je veux changer de contenu.
    Hors, je suis tombé sur un site qui change de contenu sans recharger la page.
    Donc je suppose qu'il précharge toutes les infos au début, et puis c'est bon.
    Mais ma question est la suivante :
    Comment faire changer le contenu sans recharger la page ?
    En regardant le code source, je n'ai pas vu de trace de javascript....

    Quelqu'un aurait une idée ?

    Merci de votre aide.

  2. #2
    Membre éclairé Avatar de max44410
    Étudiant
    Inscrit en
    Juin 2003
    Messages
    426
    Détails du profil
    Informations personnelles :
    Âge : 43

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Juin 2003
    Messages : 426
    Par défaut
    ce sont des div qui sont masqués ou affichés en fonction des liens sur lesquels tu cliques.

  3. #3
    Membre averti
    Profil pro
    Inscrit en
    Juin 2004
    Messages
    20
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2004
    Messages : 20
    Par défaut
    D'accord.
    Mais concrètement, ça marche comment ?

    (Je ne suis pas ce qu'on appelle "doué" en CSS... Je débute juste....)

  4. #4
    Membre éclairé Avatar de max44410
    Étudiant
    Inscrit en
    Juin 2003
    Messages
    426
    Détails du profil
    Informations personnelles :
    Âge : 43

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Juin 2003
    Messages : 426
    Par défaut
    bah à vrai dire je ne le suis pas trop non plus mais je suppose qu'il faut jouer sur l'attribut visible des div. sinon tu peux récupérer le style css du site pour voir comment il a fait.

  5. #5
    Membre averti
    Profil pro
    Inscrit en
    Juin 2004
    Messages
    20
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2004
    Messages : 20
    Par défaut
    Ben j'ai essayé de récupérer, mais comme c'est dans la balise <link>, le CSS n'apparait pas...

  6. #6
    Membre éclairé Avatar de max44410
    Étudiant
    Inscrit en
    Juin 2003
    Messages
    426
    Détails du profil
    Informations personnelles :
    Âge : 43

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Juin 2003
    Messages : 426
    Par défaut
    donne nous l'adresse pour voir ...

  7. #7
    Membre Expert Avatar de Oluha
    Profil pro
    Inscrit en
    Novembre 2004
    Messages
    2 183
    Détails du profil
    Informations personnelles :
    Âge : 42
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations forums :
    Inscription : Novembre 2004
    Messages : 2 183
    Par défaut
    Citation Envoyé par poah
    En regardant le code source, je n'ai pas vu de trace de javascript....
    Si si y'a bien du javascript. Fais une recherche sur le forum pour avoir des exemples d'onglets.

  8. #8
    Membre averti
    Profil pro
    Inscrit en
    Juin 2004
    Messages
    20
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2004
    Messages : 20
    Par défaut
    Bonjour,

    Je reviens à la charge avec mes onglets.
    J'ai donc trouver un code qui fait ce que je voulais, donc impeccable, sauf une chose :
    Au chargement de la page, il m'affiche directement le contenu de TOUS les onglets....
    Donc bon, c'est un peu embêtant.
    Je vous met le code :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
     
    <style> 
    .TabCommon {FONT: 18px Verdana; COLOR: #6D6D6D; PADDING: 5px; FONT-WEIGHT: bold; TEXT-ALIGN: center; HEIGHT: 30px; WIDTH: 100px;} 
    .TabContent {PADDING: 5px;} 
    .TabContentBottom {PADDING: 10px; BORDER-BOTTOM: 2px outset #99ccff;} 
    .TabOff {CURSOR: hand; BACKGROUND-COLOR: #E2E2E3; BORDER-LEFT: 1px solid #BBBBBB;} 
    .TabOn {CURSOR: default; BORDER-TOP: 2px outset #D1D1D1; COLOR: #000000;} 
    .TabBorderBottom{BORDER-BOTTOM: 2px inset #D1D1D1;} 
    .TabActiveBorderLeftRight{BORDER-RIGHT: 2px outset #D1D1D1; BORDER-LEFT: 2px outset #D1D1D1;} 
    .TabActiveBackground {BACKGROUND-COLOR: #F7F8F3;} 
    </style> 
    <script> 
    function TabClick( nTab ){ 
        Col = document.getElementsByName("Content"); 
        for (i = 0; i < document.getElementsByName("Content").length; i++) 
            { 
            document.getElementsByName("tabs")[i].className = "TabBorderBottom TabCommon TabOff"; 
            document.getElementsByName("Content")[i].style.display = "none"; 
            } 
        document.getElementsByName("Content")[nTab].style.display = "block";     
        document.getElementsByName("tabs")[nTab].className = "TabCommon TabOn TabActiveBackground TabActiveBorderLeftRight"; 
    } 
    </script> 
    </HEAD> 
    <BODY onload="TabClick(0);"> 
     
     
      <TABLE CELLPADDING=0 CELLSPACING=0 ALIGN="center" STYLE="width: 450px"> 
          <TR> 
              <TD CLASS="TabBorderBottom TabCommon TabOff" ID="tabs" NAME="tabs" ONCLICK="TabClick(0);"><NOBR>Onglet 1</NOBR></TD> 
              <TD CLASS="TabBorderBottom TabCommon TabOff" ID="tabs" NAME="tabs" ONCLICK="TabClick(1);"><NOBR>Onglet 2</NOBR></TD> 
              <TD CLASS="TabBorderBottom TabCommon TabOff" ID="tabs" NAME="tabs" ONCLICK="TabClick(2);"><NOBR>Onglet 3</NOBR></TD> 
            <TD CLASS="TabBorderBottom" STYLE="width: 50px;"> </TD> 
          </TR> 
          <TR> 
              <TD COLSPAN=5 CLASS="TabContent TabActiveBackground TabActiveBorderLeftRight">Texte commun </TD> 
          </TR> 
          <TR> 
              <TD COLSPAN=5 CLASS="TabContent TabActiveBackground TabActiveBorderLeftRight TabContentBottom"> 
             <DIV ID="Content" NAME="Content"><?php include './includes/page1.php'; ?></DIV> 
             <DIV ID="Content" NAME="Content">"><?php include './includes/page2.php'; ?></DIV> 
             <DIV ID="Content" NAME="Content">"><?php include './includes/page3.php'; ?></DIV> 
          </TD> 
          </TR> 
      </TABLE>
    Et donc en fait, il fait comme si l'onglet par défaut ne se chargeait pas, aucun onglet n'est sélectionné, et le contenu de toutes les pages php est affiché...

    Quelqu'un aurait une idée pour résoudre ce petit problème ?

    Merci d'avance pour vos réponse.

  9. #9
    Modérateur
    Avatar de Bisûnûrs
    Profil pro
    Développeur Web
    Inscrit en
    Janvier 2004
    Messages
    9 931
    Détails du profil
    Informations personnelles :
    Âge : 42
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2004
    Messages : 9 931
    Par défaut
    Tourne-toi vers le forum javascript ou/et lis des tutos sur l'Ajax. =)

  10. #10
    Expert confirmé
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 660
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 660
    Par défaut
    bonjour,

    ajoute dans ta CSS :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
     
    .TabOff {display: none;} 
    .TabOn {display: block}

Discussions similaires

  1. Encore une question sur les Sous-Forums
    Par Swoög dans le forum Evolutions du club
    Réponses: 12
    Dernier message: 27/05/2006, 02h17
  2. Encore une question sur les ListBox !!
    Par SebRs dans le forum Windows
    Réponses: 3
    Dernier message: 09/05/2006, 15h29
  3. Encore une question, pour retrouver 2 valeur d'une table
    Par danje dans le forum Langage SQL
    Réponses: 5
    Dernier message: 15/09/2005, 00h11
  4. Encore une question licence
    Par Neilos dans le forum C++Builder
    Réponses: 4
    Dernier message: 27/01/2005, 09h48
  5. Encore une question sur malloc
    Par IG88 dans le forum C
    Réponses: 5
    Dernier message: 23/06/2004, 15h35

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo