Onglets et javascripts - Petite question

**poah** · 29/09/2006, 14h08

Bonjour,

je voulais une présentation avec des onglets, et tout cela sans recharger la page.
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.

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

cf.http://www.developpez.net/forums/sho...d.php?t=200582

Onglets et javascripts - Petite question

JavaScript

Discussions similaires

Partager

Partager