Encore une question d'onglets

Version imprimable

24/08/2006, 11h09
poah

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.
24/08/2006, 11h14
max44410

ce sont des div qui sont masqués ou affichés en fonction des liens sur lesquels tu cliques.
24/08/2006, 11h20
poah

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

(Je ne suis pas ce qu'on appelle "doué" en CSS... Je débute juste....)
24/08/2006, 11h37
max44410

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.
24/08/2006, 11h42
poah

Ben j'ai essayé de récupérer, mais comme c'est dans la balise <link>, le CSS n'apparait pas...
24/08/2006, 11h55
max44410

donne nous l'adresse pour voir ...
24/08/2006, 12h11
poah

OLweb.fr

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

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

Exemple :
Code:

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:

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

pour masquer le div 1 et

Code:

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:

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:

1 2 3 .visible { display : inline; } .cache { display : none; }
Là encore, c'est Javascript qui change les classes des "div" en faisant :
Code:

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

24/08/2006, 14h01
Oluha

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.

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:

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. :D

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

Tourne-toi vers le forum javascript ou/et lis des tutos sur l'Ajax. =)
29/09/2006, 19h22
Auteur
bonjour,

ajoute dans ta CSS :
Code:

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