Ocultar y mostar div
Publicado por Leo (4 intervenciones) el 20/01/2016 21:43:06
Hola gente que tal? tengo el siguiente problema: tengo un mapa en mi web el cual quisiera que se muestre al presionar el boton "BUSCADOR DE ESTACIONES", pero al momento de cargar la pagina el div (id="map") esta visible arriba del carousel. Lo que quiero hacer es ocultarlo cuando se inicie la pagina y mostrarlo solamente cuando se presione el boton. Funciona pero solo si estoy en el inicio de pag (es decir solo con el carousel cargado) ya que si cargo otro contenido al presionar el boton "BUSCADOR DE ESTACIONES" no carga el mapa. Abajo le dejo el codigo. Muchas gracias
index.html
index.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="css/ypf.css">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/ypf.js"></script>
<title>YPF GRUPO NORTE</title>
</head>
<body>
<header class="mainmenu">
<nav class="navbar navbar-default" role="navigation">
<!-- El logotipo y el icono que despliega el menú se agrupan
para mostrarlos mejor en los dispositivos móviles --><div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-ex1-collapse">
<span class="sr-only">Desplegar navegación</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logotipo</a>
</div>
<!-- Agrupar los enlaces de navegación, los formularios y cualquier
otro elemento que se pueda ocultar al minimizar la barra --><div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active"><a Onclick="window.location.href='index.html'" style="cursor:pointer;">Inicio</a></li>
<li><a id="quienessomos" style="cursor:pointer;">Nosotros</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Productos y Servicios <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a id="agro" style="cursor:pointer;">Agro</a></li>
<li><a id="ypfgas" style="cursor:pointer;">YPF Gas</a></li>
<li class="divider"></li>
<li><a id="serviclub" style="cursor:pointer;">Tarjeta Servi Club</a></li>
<li><a id="full" style="cursor:pointer;">Full</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li><a id="responsabilidad" style="cursor:pointer;">Responsabilidad Social</a></li>
<li><a id="buscador" onclick="initialize();" style="cursor:pointer;">Buscador de Estaciones</a></li>
</ul>
</div>
</nav>
</header>
<div id="contenido" class="contenido">
<div id="map" style="width:100%; height:800px;"></div>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators --><ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides --><div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/ypf2.jpg" class="img2">
</div>
<div class="item">
<img src="images/ypf3.png" class="img2">
</div>
<div class="item">
<img src="images/ypf4.jpg" class="img2">
</div>
<div class="item">
<img src="images/ypf6.jpg" class="img2">
</div>
</div>
<!-- Left and right controls --><a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<footer class="pie">
<div class="icons">Seguinos en:
<a href="" target="_blank"><img alt="Siguenos en Facebook" src="https://lh3.googleusercontent.com/-NSLbC_ztNls/T6VX0g6z8AI/AAAAAAAAA0A/_vyIBrmZbuY/s48/facebook48.png" width=32 height=32 /></a>
<a href="" target="_blank"><img src="https://lh6.googleusercontent.com/--aIk2uBwEKM/T3nN1x09jBI/AAAAAAAAAs8/qzDsbw3kEm8/s32/twitter32.png" width=32 height=32 alt="Síguenos en Twitter" /></a>
<a href="" target="_blank"><img alt="Siguenos en YouTube" src="https://lh5.googleusercontent.com/-TXzlKCbKzWs/T6mYkDhTXyI/AAAAAAAAA1U/vm95Q2KwrYg/s32/youtube32.png" width=32 height=32
/></a>
</div>
</footer>
</body>
</html>
Valora esta pregunta
0
