Choix div selon ul li a

**Antoniom** · 19/10/2015, 11h42

Bonjour,

J'ai ceci qui fonctionne bien : (à copier/coller)

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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
 
<!doctype html>
<html><head>
 
<meta charset="utf-8">
 
<title>Test</title>
 
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
 
<script type="text/javascript">
 
$(document).ready(function() {
 
	document.getElementById("listName").options[0].selected = "selected";
 
	$(function () {
 
		var div = $(".cat");
 
		div.hide();
 
		$("#listName").change(function () {
 
			div.filter(":visible").fadeOut();
 
			$($(this).val()).fadeIn();
 
			return false;
 
		});
 
	});
 
});
 
</script>
 
<style type="text/css">
 
.centre {
	width:80%;
	margin:20px auto 0;
	text-align:center;
}
ul {
	margin:0 0 10px;
	padding:0;
}
ul li {
	display:inline-block;
	margin:0 5px;
	list-style:none;
}
ul li a {
	text-decoration:none;
}
ul li a:hover {
	color:#C00;
}
.texte {
	width:50%;
	margin:0 auto;
	text-align:left;
}
#bloque {
	position:relative;
}
#div1, #div2 {
	position:absolute;
	width:100%;
	margin:0 auto;
}
 
</style>
 
</head>
 
<body>
 
	<div class="centre">
 
		<ul>
			<li><a href="#div1">Div 1</a></li>
			<li><a href="#div2">Div 2</a></li>
		</ul>
 
		<select id="listName">
			<option selected="selected">Choisissez une div</option>
			<option value="#div1">Div 1</option>
			<option value="#div2">Div 2</option>
		</select>
 
		<div class="texte">
			<p>
				Iamque lituis cladium concrepantibus internarum non celate ut antea turbidum saeviebat ingenium a veri consideratione detortum et nullo inpositorum vel conpositorum fidem sollemniter inquirente nec discernente a societate noxiorum insontes velut exturbatum e iudiciis fas omne discessit, et causarum legitima silente.
			</p>
		</div>
 
		<div id="bloque">
 
			<div id="div1" class="cat">
				<h1>DIV 1</h1>
			</div>
 
			<div id="div2" class="cat">
				<h1>DIV 2</h1>
			</div>
 
		</div><!-- fin #bloque -->
 
	</div><!-- fin .centre -->
 
</body>
 
</html>

Je voudrais faire la même chose avec la liste ul, mais je n'y arrive pas.

Quelqu'un aurait la gentillesse de m'aider.

Par avance merci !

**danielhagnoul** · 19/10/2015, 23h36

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
$( function(){ // forme abrégée de $(document).ready( function( ){
 
	document.getElementById("listName").options[0].selected = "selected";
 
	var div = $(".cat");
 
	div.hide();
 
	$( "#listName" ).on( "change", function( event ){
		div.filter( ":visible" ).fadeOut();
		$( $( this ).val() ).fadeIn();
		return false;
	});
 
	$( "a[href^='#div']" ).on( "click", function( event ){
		div.filter( ":visible" ).fadeOut();
		$( $( this ).attr( "href" ) ).fadeIn();
		return false;
	});
 
});

**SpaceFrog** · 20/10/2015, 08h51

Il suffit de remplacer le change par un click et de récupérer le href au lieu du value ... http://fiddle.jshell.net/nfdm75m8/

**danielhagnoul** · 20/10/2015, 09h34

@SpaceFrog : que reproches-tu à mon code ?

**SpaceFrog** · 20/10/2015, 09h40

Rien Daniel, rien du tout, seulement j'étais en train de coder le fiddle pendant que tu as posté ton code, je me fais vieux, tu as été plus rapide que moi

**danielhagnoul** · 20/10/2015, 09h51

Alors, mon ami, c'est grave ! Car mon message date de :

Hier, 23h36

.

Choix div selon ul li a

jQuery

Vue hybride

Discussions similaires

Partager

Partager