redirigir a pagina segun name
Publicado por Francisco Javier (8 intervenciones) el 17/09/2020 20:20:01
Necesitaria saber como puedo hacer para darle al boton con id="rutas" para me redireccione a una pagina web segun este marcado el "li" del id="contenedorCero" que este presionado mostrando su imagen y descripcion. os dejo el codigo fuente del html y del css.
tengo la funcion prepara para el click del id="rutas" en la linea
359
CSS
tengo la funcion prepara para el click del id="rutas" en la linea
359
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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>picos</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="css/eslitos.css">
</head>
<body>
<header id="titulo"><img id="img1" src="imagenes/picos.png" width="100" height="30"alt=""> Los picos más altos de España
<img id="img1" src="imagenes/picos.png" width="100" height="30"alt=""></header>
<nav id="provincias">
<ul>
<li id="andalucia">Andalucía</li>
<li id="galicia">Galícia</li>
<li id="castillaYLeon">Castilla y León</li>
<li id="cantabria">Cantábria
</li>
<li id="asturias">Asturias</li>
<li id="madrid">Madrid</li>
<li id="cataluña">Cataluña</li>
<li id="aragon">Aragón</li>
<li id="valencia">Valencia</li>
<li id="castillaLaMancha">Castilla la Mancha</li>
<li id="extremadura">Extremadura</li>
<li id="canarias">Canarias</li>
<li id="islasBaleares">Islas Baleares</li>
<li id="paisVasco">País Vasco</li>
<li id="laRioja">La Rioja</li>
<li id="murcia">Murcia</li>
<li id="navarra">Navarra</li>
<li id="ceuta">Ceuta</li>
<li id="melilla">Melilla</li>
</ul>
</nav>
<div id="caja">
<div id="contenedorCero">
<ul id="anda">
<li id="chullo" name="andalucia">El chullo</li>
<li id="tiñosa" name="andalucia">La Tiñosa</li>
<li id="torreon" name="andalucia">El Torreón</li>
<li id="mulhacen" name="andalucia">El Mulhacén</li>
<li id="bonales" name="andalucia">Bonales</li>
<li id="magina" name="andalucia">La Mágina</li>
<li id="maroma" name="andalucia">La Maroma</li>
<li id="terril" name="andalucia">El Terril</li></ul>
<ul id="gal">
<li id="pilar" name="galicia">Pilar</li>
<li id="oMustallar" name="galicia">O Mustallar</li>
<li id="peña" name="galicia">Peña Trevinca</li>
<li id="faro" name="galicia">Faro</li>
</ul>
<ul id="madr">
<li id="macizo"name="madrid">Macizo de Peñalara</li>
</ul>
<ul id="extrem">
<li id="calvitero"name="caceres">Calvitero</li>
<li id="cerro"name="badajoz">Cerro de Tentudía</li>
</ul>
<ul id="cantab">
<li id="peñavieja" name="cantabria">Peña Vieja</li>
</ul>
<ul id="castillaYLeo">
<li id="moncayo" name="castillaYLeon">Moncayo</li>
<li id="chanchalDe
laceja" name="castillaYLeon">Chanchal de la Ceja</li>
<li id="peñatrevinca" name="castillaYLeon">Peña Trevinca</li>
<li id="chuchillejo" name="castillaYLeon">Chuchillejo</li>
<li id="peñaPrietaSur" name="castillaYLeon">Peña Prieta Sur</li>
<li id="torreDeCerredo" name="castillaYLeon">Torre de Cerredo</li>
<li id="almanzor" name="castillaYLeon">Almanzor</li>
</ul><ul id="astur" >
<li id="torreDeCerredo" name="asturias">Torre de Cerredo</li>
</ul><ul id="cataluñ">
<li id="costaCabirolera" name="cataluña">Costa Cabirolera</li>
<li id="puigPedros" name="cataluña">Puig Pedrós</li>
<li id="picadestats" name="cataluña">Pica d'Estats</li>
<li id="caro" name="cataluña">Caro</li>
</ul><ul id="arago">
<li id="peñarroya" name="aragon">Peñarroya</li>
<li id="moncayoAragon" name="aragon">Moncayo</li>
<li id="aneto" name="aragon">Aneto</li>
</ul><ul id="valenci">
<li id="peñagolosa" name="valencia">Peñagolosa</li>
<li id="aitana" name="valencia">Aitana</li>
<li id="cerroCalderon" name="valencia">Cerro Calderón</li>
</ul><ul id="castillaLaManch">
<li id="laAtalaya" name="castillaLaMancha">La Atalaya</li>
<li id="picoAmor" name="castillaLaMancha">Pico Amor</li>
<li id="mogorrita" name="castillaLaMancha">Mogorrita</li>
<li id="picoDelLobo" name="castillaLaMancha">Pico del Lobo</li>
<li id="corochoDeRocialgo" name="castillaLaMancha">Corocho de Rocigalgo</li>
</ul><ul id="canaria">
<li id="elTeide" name="canarias">El Téide</li>
<li id="morroDeLaAgujereada" name="canarias">Morro de la Agujereada1</li>
</ul><ul id="islaBaleare">
<li id="puigMajor" name="islasBaleares">Puig Major</li>
</ul><ul id="paisVasc">
<li id="gorbeia" name="paisVasco">Gorbeia</li>
<li id="igueldo" name="paisVasco">Igueldo</li>
<li id="aitxurri" name="paisVasco">Aitxuri</li>
</ul><ul id="laRioj">
<li id="sanLorenzo" name="laRioja">San Lorenzo</li>
</ul><ul id="murci">
<li id="picoDelObispo" name="murcia">Pico del Obispo</li>
</ul><ul id="navarr">
<li id="mesaDeLosTresReyes" name="navarra">Mesa de los Tres Reyes</li>
</ul><ul id="ceut">
<li id="monteAnyera" name="ceuta">Monte Anyera</li>
</ul><ul id="melill">
<li id="gurugu" name="melilla">Gurugú</li>
</ul> </div><div id="contenedorDos"> <div id="contenedorUno"><img src="" alt=""></div>
</div> </div> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><div id="contenedorTres"></div>
<div id="contenedorCuatro"><img src="" alt=""></div>
<div id="contenedorCinco"><input id="rutas" type="botton" value="Rutas en Wickiloc"><a href=""></a></div>
<script> $(document).ready(function(){$("#contenedorCero li").hide();
$("#andalucia").click(function(){
$("#contenedorCero li").hide();
$("#anda li").show();
});
$("#galicia").click(function(){
$("#contenedorCero li").hide();
$("#gal li").show();
});
$("#madrid").click(function(){
$("#contenedorCero li").hide();
$("#madr li").show();
});
$("#extremadura").click(function(){
$("#contenedorCero li").hide();
$("#extrem li").show();
});
$("#cantabria").click(function(){
$("#contenedorCero li").hide();
$("#cantab li").show();
});
$("#asturias").click(function(){
$("#contenedorCero li").hide();
$("#astur li").show();
});
$("#castillaYLeon").click(function(){
$("#contenedorCero li").hide();
$("#castillaYLeo li").show();
});
$("#cataluña").click(function(){
$("#contenedorCero li").hide();
$("#cataluñ li").show();
});
$("#aragon").click(function(){
$("#contenedorCero li").hide();
$("#arago li").show();
});
$("#valencia").click(function(){
$("#contenedorCero li").hide();
$("#valenci li").show();
});
$("#castillaLaMancha").click(function(){
$("#contenedorCero li").hide();
$("#castillaLaManch li").show();
});
$("#canarias").click(function(){
$("#contenedorCero li").hide();
$("#canaria li").show();
});
$("#islasBaleares").click(function(){
$("#contenedorCero li").hide();
$("#islaBaleare li").show();
});
$("#paisVasco").click(function(){
$("#contenedorCero li").hide();
$("#paisVasc li").show();
});
$("#laRioja").click(function(){
$("#contenedorCero li").hide();
$("#laRioj li").show();
});
$("#murcia").click(function(){
$("#contenedorCero li").hide();
$("#murci li").show();
});
$("#navarra").click(function(){
$("#contenedorCero li").hide();
$("#navarr li").show();
});
$("#ceuta").click(function(){
$("#contenedorCero li").hide();
$("#ceut li").show();
});
$("#melilla").click(function(){
$("#contenedorCero li").hide();
$("#melill li").show();
});
$("#chullo").click(function(){
$("#contenedorCero li").removeClass("destacar");
$("#chullo").addClass("destacar");
$("#contenedorDos img").attr("src","imagenes/1.jpg");
$("#contenedorTres").html("<p>El Chullo, con <b>2611</b> msnm, es el pico más alto de la provincia de Almería. Está integrado en la cordillera Penibética, más específicamente en Sierra Nevada, de cuyo parque nacional forma parte.");
$("#contenedorCuatro img").attr("src","");
});
$("#tiñosa").click(function(){
$("#contenedorCero li").removeClass("destacar");
$("#tiñosa").addClass("destacar");
$("#contenedorDos img").attr("src","imagenes/2.jpg");
$("#contenedorTres").html("<p>El pico de la Tiñosa o simplemente La tiñosa es una montaña 1 de la Cordillera Subbética situada en el cordal principal de la sierra Horconera, en la provincia de Córdoba, en Andalucía, España. Está situado en el municipio de Priego de Córdoba.");
});
$("#torreon").click(function(){
$("#contenedorCero li").removeClass("destacar");
$("#torreon").addClass("destacar");
$("#contenedorDos img").attr("src","imagenes/3.jpg");
$("#contenedorTres").html("<p>El pico El Torreón está situado en la Sierra del Pinar, dentro del conjunto de sierras que conforman la Sierra de Grazalema en la provincia de Cádiz en España situado a <b> 1654</b> m sobre el nivel del mar.");
});
$("#mulhacen").click(function(){
$("#contenedorCero li").removeClass("destacar");
$("#mulhacen").addClass("destacar");
$("#contenedorDos img").attr("src","imagenes/4.jpg");
$("#contenedorTres").html("<p>El Mulhacén, con una altitud de <b>3482,6 </b>m s. n. m., es el pico más alto de la península ibérica y el segundo de España tras el Teide, de 3718 m s. n. m. (Tenerife, Canarias). El Mulhacén forma parte del parque nacional de Sierra Nevada. Está enclavado en la provincia de Granada, en el sur peninsular de España, y pertenece a Sierra Nevada, en la cordillera Penibética.");
});
$("#bonales").click(function(){
$("#contenedorCero li").removeClass("destacar");
$("#bonales").addClass("destacar");
$("#contenedorDos img").attr("src","imagenes/5.jpg");
$("#contenedorTres").html("<p>El monte Bonales (también conocido como cerro Bonales o cumbre Bonales) es, con <b>1055 </b>msnm, la elevación más alta de la provincia andaluza de Huelva, en el municipio de Arroyomolinos de León, encuadrado en el Parque natural de Sierra de Aracena y Picos de Aroche y prácticamente en la frontera con la provincia extremeña de Badajoz.");
});
$("#magina").click(function(){
$("#contenedorCero li").removeClass("destacar");
$("#magina").addClass("destacar");
$("#contenedorDos img").attr("src","imagenes/6.jpg");
$("#contenedorTres").html("<p>El pico Mágina es un cerro situado en el parque natural de Sierra Mágina en la provincia de Jaén. Su altitud es de <b>2167</b> msnm.2 Es el pico más alto de esta provincia y forma parte de las 8 Cimas de Andalucía. Se encuentra en la divisoria de los términos municipales de Albanchez de Mágina y de Huelma, en una larga cuerda que supera los dos mil metros a lo largo de 5 km, desde la Peña de Jaén (2147 m) Miramundos 2077 msnm hasta Peña Grajera (2014 m).");
});
$("#maroma").click(function(){
$("#contenedorCero li").removeClass("destacar");
$("#maroma").addClass("destacar");
$("#contenedorDos img").attr("src","imagenes/7.jpg");
$("#contenedorTres").html(" <p> La Maroma, con <b>2069</b> msnm de altitud,12es el pico más alto de la sierra de Tejeda, dentro del parque natural de las Sierras de Tejeda, Almijara y Alhama. Es el punto más alto de la comarca de la Axarquía y de toda la provincia de Málaga, en España, formando parte de las 8 Cimas de Andalucía.");
});
$("#terril").click(function(){
$("#contenedorCero li").removeClass("destacar");
$("#terril").addClass("destacar");
$("#contenedorDos img").attr("src","imagenes/8.jpg");
$("#contenedorTres").html("<p>El pico del Terril es la máxima altitud de la provincia española de Sevilla en Andalucía, con <b>1129</b> msnm. Se localiza en la localidad sevillana de Pruna, teniendo como vecino al peñon de Algámitas.");
});
$("#pilar").click(function(){
$("#contenedorCero li").removeClass("destacar");
$("#pilar").addClass("destacar");
$("#contenedorDos img").attr("src","imagenes/8.jpg");
$("#contenedorTres").html("<p>El pico del Terril es la máxima altitud de la provincia española de Sevilla en Andalucía, con <b>1129</b> msnm. Se localiza en la localidad sevillana de Pruna, teniendo como vecino al peñon de Algámitas.");
});
//linea 57$("#oMustallar").click(function(){
$("#contenedorCero li").removeClass("destacar");
$("#oMustallar").addClass("destacar");
$("#contenedorDos img").attr("src","imagenes/13.jpg");
$("#contenedorTres").html("<p>El pico Mustallar es una montaña perteneciente a la sierra de Ancares (España). Es una de las cimas más altas de la sierra, y también, con sus <b>1935</b> msnm, el punto más alto de la provincia de Lugo. El pico se encuentra en el límite entre esta provincia y la de León");
});
//linea58$("#peña").click(function(){
$("#contenedorCero li").removeClass("destacar");
$("#peña").addClass("destacar");
$("#contenedorDos img").attr("src","imagenes/14.jpg");
$("#contenedorTres").html("<p>Pena Trevinca, con una altura máxima de 2.127 metros es el punto más alto de este macizo que también cuenta con otras montañas importantes como Pena Negra con <b>2.121</b> metros o Pena Surbia con 2.095 metros. Esta área está incluida en la Red Natura 2.000 y es Lugar de Importancia Comunitaria (LIC), además de Zona de Especial Protección para las Aves (ZEPA).");
});
//linea59$("#faro").click(function(){
$("#contenedorCero li").removeClass("destacar");
$("#faro").addClass("destacar");
$("#contenedorDos img").attr("src","imagenes/15.jpg");
$("#contenedorTres").html("<p>Desde le puerto de Vegarada y con buen tiempo, no es demasiado difícil ascender al Pico Faro de <b>2110</b> m de altitud (La cumbre mas a nuestra derecha según se mira). Es necesario seguir un marcado sendero que nos introduce en la Puertona de Faro, (Ese gran hueco que vemos a la izquierda).");
});
/* var picos=document.querySelectorAll("#contenedorCero li"); for (var i=0; i<picos.length;i++){ picos[i].addEventListener("cick",ponImagen,false); }*/$("#rutas").click(function(){
}});
});
/*function ponImagen(e){ if (e.target==chullo){ $("#maroma").removeClass("destacar"); }*/</script>
</body>
</html>
CSS
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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
*{
margin: 0;}body{background-image:url(imagenes/teide.jpg);
}#contenedorCero{ position: absolute; left: 67px; top: 177px; width: 408px; height: 298px;z-index: 1;
font-family: fantasy;
font-weight: normal;
}#contenedorDos{ /*background: gray; float: left; padding: 110px; border: 1px solid black; margin-left: 20px*/ position: absolute; left: 710px; top: 190px; width: 276px; height: 183px;z-index: 2;
}#contenedorTres{ position: absolute; left: 1010px; top: 176px; width: 276px; height: 183px;z-index: 2;
padding: 10px;}#contenedorCuatro{ position: absolute; left: 1010px; top: 390px; width: 276px; height: 183px;z-index: 2;
padding: 10px;}#provincias li{ display: inline; padding: 10px;}#caja{ float: left;}.destacar{
text-align: left;
font-family: Arial Black;
font-weight: bold; font-size: 30px;
background: #202020;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
color: transparent;text-shadow: 0px 3px 3px rgba(255,255,255,0.4),0px -1px 1px rgba(0,0,0,0.3);
font-size: 20px;
}.destacarDos{
color:#f79292;
background:black;}#provincias li{ border:solid; float: left;font-size: 20px;
color :#804c01;
background: #ceceff;
border: white 8px outset;}#provincias li:active{ border:solid; float: left;font-size: 20px;
color :#4d3109;
background: #a0a0bc;
border: #e5dcdc 8px outset;
}#img1{opacity: 0.8;
}#titulo{text-align: left;
font-family: Arial Black;
font-weight: bold; font-size: 30px;
background: #202020;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
color: transparent;text-shadow: 0px 3px 3px rgba(255,255,255,0.4),0px -1px 1px rgba(0,0,0,0.3);
text-align: center;
background: #f2b0bc;
color:saddlebrown; border: solid; border: white 8px outset;}#contenedorCinco{ position: absolute; left: 1010px; top: 450px; width: 276px; height: 183px;z-index: 2;
}#rutas{ color:white; background: green; padding: 5px;text-align: center;
}#rutas:active{
background: #054305;
box-shadow: 5px 5px 25px;
}Valora esta pregunta
0