onglet

**nektar2005** · 07/09/2005, 12h33

salut,
je voudrais savoir dans l'exemple du tutoriel css(navigation par onglet) ce qu'il faudrait faire pour que en cliquant par exemple sur l'onglet velo j'ai le contenu de l'onglet qui s'affiche.

au départ je pensais qu'il fallait juste remplacer le # par le nom d'un fichier qui contient les informations qu'on voudrait afficher.par exemple

Code :

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

1
2
3
<ul id="tabnav">
   <li class="active"><a href="#">Voiture</a></li>
   <li><a href="#">Vélo</a></li>

par

Code :

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

1
2
3
<ul id="tabnav">
   <li class="active"><a href="voiture.php">Voiture</a></li>
   <li><a href="velo.php">Vélo</a></li>

**Oluha** · 07/09/2005, 12h53

pour les onglets il faut passer par du javascript

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
46
47
48
49
50
51
52
53
<HTML>
<HEAD>
<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: pointer; 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;}
.cadre { border: 1px solid #FF0000 }
</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 TabCommon TabOff" ID="tabs" NAME="tabs" ONCLICK="TabClick(3);"><NOBR>Onglet 4 ...</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">contenu Onglet 1</DIV>
         <DIV ID="Content" NAME="Content">contenu Onglet 2</DIV>
         <DIV ID="Content" NAME="Content">contenu Onglet 3</DIV>
         <DIV ID="Content" NAME="Content">contenu Onglet 4</DIV>
      </TD>
      </TR>
</TABLE>
 
</BODY>
</HTML>

**ilood** · 07/09/2005, 14h20

Salut,

Envoyé par nektar2005

[...]

Code :

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

1
2
3
<ul id="tabnav">
   <li class="active"><a href="voiture.php">Voiture</a></li>
   <li><a href="velo.php">Vélo</a></li>

Ce code appelle la page velo.php ... le navigateur n'affiche pas son contenu ?

**nektar2005** · 07/09/2005, 22h51

si le navigateur affiche son contenu mais sur toute la page or je pensais que ça allait apparaitre que sur la section velo

**nektar2005** · 07/09/2005, 23h03

oluha y'aurait pas plus simple ...

**dasdeb** · 08/09/2005, 00h03

Tu as trois exemple en CSS ici:
http://batraciens.net/css-astuces/onglets-1.htm

Il y en a d'autres ailleurs, mais ceux-ci te donnent déjà une idée ^^

**nektar2005** · 08/09/2005, 03h18

Merci

**SpaceFrog** · 08/09/2005, 10h06

j'avais aussi du mettre un truc dans la FAQ sur les onglets non ?

**Oluha** · 08/09/2005, 11h25

Envoyé par nektar2005

oluha y'aurait pas plus simple ...

Ca dépend si tu veux recharger la page à chaque fois ou pas. L'avantage de ma solution c'est que ca ne recharge pas la page

**ilood** · 08/09/2005, 11h41

Envoyé par nektar2005

si le navigateur affiche son contenu mais sur toute la page or je pensais que ça allait apparaitre que sur la section velo

Dans ce cas il faut que dans la page velo.php il y ai la barre de navigation

Code :

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

1
2
3
<ul id="tabnav"> 
   <li><a href="voiture.php">Voiture</a></li> 
   <li class="active"><a href="velo.php">Vélo</a></li>

**SpaceFrog** · 08/09/2005, 13h00

charger des pages ...
das l'exemple que j'ai mis dans la faq c'"est juste un jeu de masquer ou rendre visible de divs ...

sinon avec un XMLHttpRequest et deux div c'est possible aussi ...

onglet

HTML

Discussions similaires

Partager

Partager