Onglet en HTML

**kcizth** · 21/12/2005, 16h07

Bonjour,

Est-il possible de faire des onglet en HTML ?

si oui, avez vous un exemple
si non, comment faire ?

Merci

**Skarlix** · 21/12/2005, 16h14

Bah j'ai ça je sais pas si c'est ça que tu cherches.

http://www.xhtml.net/xhtmlcss/csstabs

A+

**kcizth** · 21/12/2005, 16h21

cela pourrait aller, mais comment met-on des choses dans chaque onglet ?

**siddh** · 21/12/2005, 16h22

ben c est juste un effet visuel, tes onglets sont en fait des liens vers des pages.

un onglet = une page

**kcizth** · 21/12/2005, 16h26

as-tu des exemples de codes ?

**franculo_caoulene** · 21/12/2005, 16h29

Salut,

Une jolie référence : http://www.alistapart.com/articles/slidingdoors
Tu peux essayer de faire une recherche sur "porte coulissante" sur google.fr si tu veux la version française. mais je n'ai pas essayé.

**pc75** · 21/12/2005, 16h32

Bonjour,

C'est plutot 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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
 
<HTML>
<HEAD>
<style>
.TabCommon {FONT: 18px Verdana; COLOR: red; PADDING: 5px; FONT-WEIGHT: bold; TEXT-ALIGN: center; HEIGHT: 30px; WIDTH: 5000px;}
.TabContent {PADDING: 5px;}
.TabContentBottom {PADDING: 10px; BORDER-BOTTOM: 2px outset #99ccff;}
.TabOff {CURSOR: hand; BACKGROUND-COLOR: blue; BORDER-LEFT: 1px solid #BBBBBB;}
.TabOn {CURSOR: default; BORDER-TOP: 2px outset #D1D1D1; COLOR: green;}
.TabBorderBottom{BORDER-BOTTOM: 2px inset #D1D1D1;}
.TabActiveBorderLeftRight{BORDER-RIGHT: 2px outset #D1D1D1; BORDER-LEFT: 2px outset #D1D1D1;}
.TabActiveBackground {BACKGROUND-COLOR: Silver;}
</style>
<script>
function TabClick( nTab )
        {
        for (i = 0; i < Content.length; i++)
                {tabs[i].className = "TabBorderBottom TabCommon TabOff";
                Content[i].style.display = "none";}
                Content[nTab].style.display = "block";
                tabs[nTab].className = "TabCommon TabOn TabActiveBackground TabActiveBorderLeftRight";
        }
</script>
</HEAD>
<BODY onload="TabClick(0);">
 
<form name="frmSaisie" method="post" action="Recup.asp">
 
<TABLE CELLPADDING=0 CELLSPACING=0 ALIGN="center" STYLE="width: 450px">
	<TR>
		<TD CLASS="TabBorderBottom TabCommon TabOff" ID="tabs" ONCLICK="TabClick(0);">
			<NOBR>Onglet 1</NOBR>
		</TD>
 
		<TD CLASS="TabBorderBottom TabCommon TabOff" ID="tabs" ONCLICK="TabClick(1);">
			<NOBR>Onglet 2</NOBR>
		</TD>
 
		<TD CLASS="TabBorderBottom TabCommon TabOff" ID="tabs" ONCLICK="TabClick(2);">
			<NOBR>Onglet 3</NOBR>
		</TD>
 
		<TD CLASS="TabBorderBottom TabCommon TabOff" ID="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 1
		</TD>
	</TR>
 
	<TR>
		 <TD COLSPAN=5 CLASS="TabContent TabActiveBackground TabActiveBorderLeftRight TabContentBottom">     
			<DIV id=Content>
				contenu Onglet 1
				<br>
				<input type="text" name="txt1_1">
				<br>
				<input type="text" name="txt1_2">
			</DIV>
 
			<DIV id=Content>
				contenu Onglet 2
				<input type="text" name="txt2_1">
				<br>
				<input type="text" name="txt2_2">
			</DIV>
 
			<DIV id=Content>
				contenu Onglet 3
			</DIV>
 
			<DIV id=Content>
				contenu Onglet 4
			</DIV>
		</TD>
	</TR>
 
	<TR>
		 <TD COLSPAN=5 CLASS="TabContent TabActiveBackground TabActiveBorderLeftRight">
			Texte commun 2
			<center>
			<input type="submit" value="Ok" name="btnGo">
			</center>
		</TD>
	</TR>
</TABLE>
 
</form>
 
</BODY>
</HTML>

**Skarlix** · 21/12/2005, 16h32

Envoyé par franculo_caoulene

Salut,

Une jolie référence : http://www.alistapart.com/articles/slidingdoors
Tu peux essayer de faire une recherche sur "porte coulissante" sur google.fr si tu veux la version française. mais je n'ai pas essayé.

Je l'avais gardé en réserve celui la, zut

**kcizth** · 21/12/2005, 16h39

merci pour ton code
c'est ok

**Skarlix** · 21/12/2005, 16h42

Perso sans Javascript ça marche tres bien, l'inconvénient la c'est que si le gars en face désactive son javascript tes onglets marche plus.

**balu** · 21/12/2005, 22h18

Envoyé par franculo_caoulene

Salut,

Une jolie référence : http://www.alistapart.com/articles/slidingdoors
Tu peux essayer de faire une recherche sur "porte coulissante" sur google.fr si tu veux la version française. mais je n'ai pas essayé.

Version française du même article

**franculo_caoulene** · 22/12/2005, 10h54

Je savais que je l'avais déjà vu quelque part. Merci.

**jpharand** · 27/01/2010, 18h25

Envoyé par pc75

Bonjour,

C'est plutot 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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
 
<HTML>
<HEAD>
<style>
.TabCommon {FONT: 18px Verdana; COLOR: red; PADDING: 5px; FONT-WEIGHT: bold; TEXT-ALIGN: center; HEIGHT: 30px; WIDTH: 5000px;}
.TabContent {PADDING: 5px;}
.TabContentBottom {PADDING: 10px; BORDER-BOTTOM: 2px outset #99ccff;}
.TabOff {CURSOR: hand; BACKGROUND-COLOR: blue; BORDER-LEFT: 1px solid #BBBBBB;}
.TabOn {CURSOR: default; BORDER-TOP: 2px outset #D1D1D1; COLOR: green;}
.TabBorderBottom{BORDER-BOTTOM: 2px inset #D1D1D1;}
.TabActiveBorderLeftRight{BORDER-RIGHT: 2px outset #D1D1D1; BORDER-LEFT: 2px outset #D1D1D1;}
.TabActiveBackground {BACKGROUND-COLOR: Silver;}
</style>
<script>
function TabClick( nTab )
        {
        for (i = 0; i < Content.length; i++)
                {tabs[i].className = "TabBorderBottom TabCommon TabOff";
                Content[i].style.display = "none";}
                Content[nTab].style.display = "block";
                tabs[nTab].className = "TabCommon TabOn TabActiveBackground TabActiveBorderLeftRight";
        }
</script>
</HEAD>
<BODY onload="TabClick(0);">
 
<form name="frmSaisie" method="post" action="Recup.asp">
 
<TABLE CELLPADDING=0 CELLSPACING=0 ALIGN="center" STYLE="width: 450px">
	<TR>
		<TD CLASS="TabBorderBottom TabCommon TabOff" ID="tabs" ONCLICK="TabClick(0);">
			<NOBR>Onglet 1</NOBR>
		</TD>
 
		<TD CLASS="TabBorderBottom TabCommon TabOff" ID="tabs" ONCLICK="TabClick(1);">
			<NOBR>Onglet 2</NOBR>
		</TD>
 
		<TD CLASS="TabBorderBottom TabCommon TabOff" ID="tabs" ONCLICK="TabClick(2);">
			<NOBR>Onglet 3</NOBR>
		</TD>
 
		<TD CLASS="TabBorderBottom TabCommon TabOff" ID="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 1
		</TD>
	</TR>
 
	<TR>
		 <TD COLSPAN=5 CLASS="TabContent TabActiveBackground TabActiveBorderLeftRight TabContentBottom">     
			<DIV id=Content>
				contenu Onglet 1
				<br>
				<input type="text" name="txt1_1">
				<br>
				<input type="text" name="txt1_2">
			</DIV>
 
			<DIV id=Content>
				contenu Onglet 2
				<input type="text" name="txt2_1">
				<br>
				<input type="text" name="txt2_2">
			</DIV>
 
			<DIV id=Content>
				contenu Onglet 3
			</DIV>
 
			<DIV id=Content>
				contenu Onglet 4
			</DIV>
		</TD>
	</TR>
 
	<TR>
		 <TD COLSPAN=5 CLASS="TabContent TabActiveBackground TabActiveBorderLeftRight">
			Texte commun 2
			<center>
			<input type="submit" value="Ok" name="btnGo">
			</center>
		</TD>
	</TR>
</TABLE>
 
</form>
 
</BODY>
</HTML>

Bonjour,
Ce code ne semble pas marcher avec Firefox alors qu'il fonctionne avec Chrome et... IE (un comble, non ?)
Je ne trouve pas ce qui gêne Firefox.
Avez-vous une idée ?
Cordialement.

**pc75** · 28/01/2010, 12h35

Bonjour,

Regarde le dernier message de ce post :

http://www.developpez.net/forums/d11...l/onglet-form/

**jpharand** · 28/01/2010, 18h17

Envoyé par pc75

Bonjour,

Regarde le dernier message de ce post :

http://www.developpez.net/forums/d11...l/onglet-form/

Bonjour et merci de la réponse... mais "Page not found" !

**pc75** · 29/01/2010, 09h27

Re,

Surement un copier / coller malheureux.

http://www.developpez.net/forums/d11...l/onglet-form/

**jpharand** · 29/01/2010, 16h41

Merci du lien.
Effectivement, ce code là fonctionne sous Firefox.
Je préfère :o)
Encore merci.
Cordialement.

Onglet en HTML

HTML

Discussions similaires

Partager

Partager