Je cherche à réaliser des onglets à l'intérieur de balise <form>...est ce possible? Si oui comment?
Je cherche à réaliser des onglets à l'intérieur de balise <form>...est ce possible? Si oui comment?
Bonjour,
Peut-être ça ?
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 <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: 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 ){ 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);"> <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 </TD> </TR> <TR> <TD COLSPAN=5 CLASS="TabContent TabActiveBackground TabActiveBorderLeftRight TabContentBottom"> <DIV id=Content>contenu Onglet 1</DIV> <DIV id=Content>contenu Onglet 2</DIV> <DIV id=Content>contenu Onglet 3</DIV> <DIV id=Content>contenu Onglet 4</DIV> </TD> </TR> </TABLE> </BODY> </HTML>
salut,
le code ci-dessus ne passe pas firefox et d'éclenche une alerte de sécurité activeX sous IE![]()
pour information
sinon effet sympa
@++
Rudwolf
euh t'es sûr ?![]()
j'ai utilisé exactement le même code sur un intranet et ca marche aussi bien sur FF que IE
perso g juste copier collé le code dans une new page et je l'ai affiché
et donc résultat comme indiqué ci-dessus![]()
dernière version IE et FF
ca serait pas le javascript qui serait bloqué tout simplement ?
De mon côté, ça fonctionne sous IE, mais pas sous Firefox.
exact, je m'étais basée sur ce code mais je l'avais modifié pour le faire fonctionner sous FF
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: 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 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>
Bonjour tout le monde,
je suis webmestre d'un site qui utilise une usine à gaz de gestion de contenus, et j'ai voulu un peu égayer tout ça !
J'ai donc essayé d'insérer un menu avec onglets (oui, je sais, tout le monde le fait en CSS, il y a des milliers de tutos sur le web, je suis une quiche, etc....) mais le système ne tolère que le HTML stricte (pas de CSS modifiable, pas de javascript, pas de php, etc.
J'ai utilisé le script trouvé dans ce post, mais la fonction qui permet d'être sur le premier onglet au départ ne fonctionne pas :
http://www.pedagogie.ac-nantes.fr/22...=1160222729156
Quelqu'un aurait une idée ? Que dois je modifier ?
Merci d'avance !!
Partager