faire un contenu avec intercalaire

**artotal** · 22/08/2007, 21h32

Bonjour,
je voudrai avoir le contenu qui s'affiche au clic , puis que le reste des bloc ouvert se ferme.

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
<?php
function debut($id, $title)
{
?>
<table cellpadding="0" cellspacing="0">
<tr>
<td width="30" valign="top">
<a href="javascript:ouvrir('<?php echo $id;?>');">
<img src="./img/up.png" border="0" id="img_<?php echo $id;?>" /></a>
</td>
<td width="90%">
<h1><?php echo $title;?></h1>
<div style="display:none;" id="<?php echo $id;?>" class="spin-content">
<?php }
function fin_section() {
?>
</div>
</td>
</tr>
</table>
<?php }
function intercalaire() { ?>
<script>
function ouvrir(element) {
    imgobj= document.getElementById("img_"+element);
    divgobj= document.getElementById(element);
    if(imgobj.src.match("./img/up.png"))
    {
        imgobj.src = "./img/down.png";
        divobj.style.display="block";
    } else {
        imgobj.src = "./img/up.png";
        divobj.style.display="none";
    }
}
</script>
<?php }?>
 
 
<html>
<head><?php intercalaire();?></head>
<body>
<?php debut('un', 'première partie'); ?>
bla blabla blabla blabla blabla blabla blabla blabla bla<br />
bla blabla blabla blabla blabla blabla blabla blabla bla<br />
bla blabla blabla blabla blabla blabla blabla blabla bla<br />
bla blabla blabla blabla blabla blabla blabla blabla bla<br />
<?php fin_section();?>
 
<?php debut('deux', 'deuxième partie'); ?>
bla blabla blabla blabla blabla blabla blabla blabla bla<br />
bla blabla blabla blabla blabla blabla blabla blabla bla<br />
bla blabla blabla blabla blabla blabla blabla blabla bla<br />
bla blabla blabla blabla blabla blabla blabla blabla bla<br />
<?php fin_section();?>
 
<?php debut('trois', 'troisième partie'); ?>
bla blabla blabla blabla blabla blabla blabla blabla bla<br />
bla blabla blabla blabla blabla blabla blabla blabla bla<br />
bla blabla blabla blabla blabla blabla blabla blabla bla<br />
bla blabla blabla blabla blabla blabla blabla blabla bla<br />
<?php fin_section();?>
</body>
</html>

Code :

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

1
2
3
   imgobj= document.getElementById("img_"+element);
   divgobj= document.getElementById(element);
   if(imgobj.src.match("./img/up.png"))

je crois que le test ne fonctionne pas mais comment tester une chaine de caractère en js

**jypees** · 22/08/2007, 21h49

J'ai regardé un peu ton code, que veux-tu faire exactemen??? car si j'ai bien compris ce que tu veux faire c'est pas une tres bonne methode ton code

Tu peux m'expliquer?

**artotal** · 23/08/2007, 00h32

je veux afficher masquer des menu qui se trouvent l'un en dessous de l'autre. J'arrive à le faire de cette façon

En fait ce que je n'arrive pas c'est faire plusieurs block si un est affiché les autres doivent être masquer.

**jypees** · 23/08/2007, 22h07

suivant ce que tu m'as demandé je t'ai codé un petit truc ^^ tu veras c'est simple a comprendre !!!

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
 
<html>
	<head>
		<title>Voila ton code</title>
		<script language="javascript">
		function change(pos)
		{	
			tabLib = document.getElementById('menu');
			content = tabLib.getElementsByTagName('div');
			for (i = 0; i < content.length; i++)
			{
				(i == pos) ? (content[i].style.visibility = 'hidden') : (content[i].style.visibility = 'visible');
			}
		}
		</script>
	</head>
	<body>
		<div onclick="change(0);">show</div>
		<div onclick="change(1);">show</div>
		<div onclick="change(2);">show</div>
		<div onclick="change(3);">show</div>
		<div id="menu">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
		</div>
	</body>
</html>

Dis moi ce que tu en penses ^^ Mais c'etait ca ton idée ^^ L'interet d'un code comme celui la c'est que tu peux l'utiliser pour plein de truc (changer couleur taille etc) voila

**artotal** · 26/08/2007, 23h43

Ton code donne un résultat mais je ne comprend pas bien sont fonctionnement ?
Comment se fait-il que cette ligne se transforme en tableau indexé ?

Code :

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

content = tabLib.getElementsByTagName('div');

Le reste je pense comprendre.
Merci
PS: très jolis ton code

edit ->
je viens du php et tu ma appris énormément de chose !!!
T'es un

j'ai donc fait à ma convenance !

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>
		<title>Voila ton code</title>
		<script language="javascript">
		function change(pos)
		{	
			tabLib = document.getElementById('menu');
			content = tabLib.getElementsByTagName('ul');
			for (i = 0; i < content.length; i++)
			{
				(i == pos) ? (content[i].style.display="block") : (content[i].style.display="none");
			}
		}
		</script>
	</head>
	<body>
	<div id="menu">
		<h5 onclick="change(0);">show</h5>
		<ul>
			<li>menu0</li>
			<li>menu0</li>
			<li>menu0</li>
			<li>menu0</li>
			<li>menu0</li>
		</ul>
		<h5 onclick="change(1);">show</h5>	
		<ul>
			<li>menu1</li>
			<li>menu1</li>
			<li>menu1</li>
			<li>menu1</li>
			<li>menu1</li>
		</ul>
		<h5 onclick="change(2);">show</h5>
		<ul>
			<li>menu2</li>
			<li>menu2</li>
			<li>menu2</li>
			<li>menu2</li>
		</ul>
		<h5 onclick="change(3);">show</h5>
		<ul>
			<li>menu3</li>
			<li>menu3</li>
			<li>menu3</li>
			<li>menu3</li>
			<li>menu3</li>
		</ul>
	</div>		
	</body>
</html>

**jypees** · 27/08/2007, 00h26

getElementsByTagName('div') recupere sous forme de tableau tout les elements indexé a un niveau. Ici ca sera tout les div referencé au niveau du menu

Apres tu peux passer autre chose que ca

Et merci pour les compliments ^^

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
 
<html>
	<head>
		<title>Voila ton code</title>
		<script language="javascript">
		function change(pos)
		{	
			tabLib = document.getElementById('menu');
			content = tabLib.getElementsByTagName('ul');
			for (i = 0; i < content.length; i++)
			{
				(i == pos) ? (content[i].style.display="block") : (content[i].style.display="none");
			}
		}
		</script>
	</head>
	<body>
	<div id="menu">
		<h5 onclick="change(0);">show</h5>
		<ul>
			<li>menu0</li>
			<li>menu0</li>
			<li>menu0</li>
			<li>menu0</li>
			<li>menu0</li>
		</ul>
		<h5 onclick="change(1);">show</h5>	
		<ul>
			<li>menu1</li>
			<li>menu1</li>
			<li>menu1</li>
			<li>menu1</li>
			<li>menu1</li>
		</ul>
		<h5 onclick="change(2);">show</h5>
		<ul>
			<li>menu2</li>
			<li>menu2</li>
			<li>menu2</li>
			<li>menu2</li>
		</ul>
		<h5 onclick="change(3);">show</h5>
		<ul>
			<li>menu3</li>
			<li>menu3</li>
			<li>menu3</li>
			<li>menu3</li>
			<li>menu3</li>
		</ul>
	</div>		
	</body>
</html>
<script>
change(0);
</script>

J'ai ajouté change(0); en fin ca permet de tout caché ^^ histoire de design

faire un contenu avec intercalaire

JavaScript

Vue hybride

Discussions similaires

Partager

Partager