Encore une question d'onglets

**poah** · 24/08/2006, 11h09

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.

**max44410** · 24/08/2006, 11h14

ce sont des div qui sont masqués ou affichés en fonction des liens sur lesquels tu cliques.

**poah** · 24/08/2006, 11h20

D'accord.
Mais concrètement, ça marche comment ?

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

**max44410** · 24/08/2006, 11h37

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.

**poah** · 24/08/2006, 11h42

Ben j'ai essayé de récupérer, mais comme c'est dans la balise <link>, le CSS n'apparait pas...

**max44410** · 24/08/2006, 11h55

donne nous l'adresse pour voir ...

**poah** · 24/08/2006, 12h11

OLweb.fr

Il y a un tableau avec classements, derniers résultats, et prochain match.

**Chen norris** · 24/08/2006, 12h22

En fait, pour chaque onglet, tu fais un div avec le contenu dedans.

Exemple :

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
 
<div id="1">
     <table>
          ...
     </table>
</div>
<div id="2">
     <table>
          ...
     </table>
</div>
<div id="3">
     <table>
          ...
     </table>
</div>

Pense bien à mettre un id pour chaque div : ça a son importance. Ensuite, avec Javascript, tu peux faire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById("1").style.display = "none"

pour masquer le div 1 et

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById("1").style.display = "inline"

pour l'afficher.

Si t'as des soucis d'affichage avec "inline", tu peux essayer avec "block".

Autre solution : les CSS

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
 
<div id="1" class="visible">
     <table>
          ...
     </table>
</div>
<div id="2" class="cache">
     <table>
          ...
     </table>
</div>
<div id="3" class="cache">
     <table>
          ...
     </table>
</div>

Et au niveau du CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
.visible     { display : inline; }
.cache     { display : none; }

Là encore, c'est Javascript qui change les classes des "div" en faisant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
document.getElementById("1").className = "cache";
document.getElementById("1").className = "visible";

**Oluha** · 24/08/2006, 14h01

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.

**poah** · 28/09/2006, 16h50

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.

**Bisûnûrs** · 28/09/2006, 17h03

Tourne-toi vers le forum javascript ou/et lis des tutos sur l'Ajax. =)

**Auteur** · 29/09/2006, 19h22

bonjour,

ajoute dans ta CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
.TabOff {display: none;} 
.TabOn {display: block}

Encore une question d'onglets

HTML

Discussions similaires

Partager

Partager