Navbar no funciona correctamente (Intento de one page site)
Publicado por Jhon (1 intervención) el 01/01/2017 03:37:53
Cordial saludo:
Estoy intentando hacer una página sencilla para un consultorio odontológico. No es nada del otro mundo, cuatro enlaces y un formulario para pedir cita.
He usado bootstrap y estoy teniendo un problema con el navbar que creo que se relaciona con la forma en que utilizo jquery para que mi página funcione.
Tengo un navbar típico de bootstrap con cuatro enlaces. En mi index.html tengo dos secciones: Un aside fijo y un div principal que carga un contenido html u otro si hago click en lso enlaces de la nav bar.
Si cargo la página como está ella de inicio, en tamaño mobile el navbar al oprimir la hamburguesa se despliega y al oprimirlo de nuevo se colapsa.
Pero si oprimo uno de mis enlaces ya la hamburguesa deja de funcionar. El menú se queda desplegado.
He subido lo poco que he hecho en este servidor: http://52.42.125.35/credident/.
Para que funcionen mis enlaces, al hacer click una función quita la clase active a los otros enlaces y se lo añade al link pulsado. Y se carga el html requerido en el div:
El navbar es copiado de librosweb y lo he usado otras veces con páginas "normalitas":
Si alguien puede aclararme un poco le agradezco mucho.
Estoy intentando hacer una página sencilla para un consultorio odontológico. No es nada del otro mundo, cuatro enlaces y un formulario para pedir cita.
He usado bootstrap y estoy teniendo un problema con el navbar que creo que se relaciona con la forma en que utilizo jquery para que mi página funcione.
Tengo un navbar típico de bootstrap con cuatro enlaces. En mi index.html tengo dos secciones: Un aside fijo y un div principal que carga un contenido html u otro si hago click en lso enlaces de la nav bar.
Si cargo la página como está ella de inicio, en tamaño mobile el navbar al oprimir la hamburguesa se despliega y al oprimirlo de nuevo se colapsa.
Pero si oprimo uno de mis enlaces ya la hamburguesa deja de funcionar. El menú se queda desplegado.
He subido lo poco que he hecho en este servidor: http://52.42.125.35/credident/.
Para que funcionen mis enlaces, al hacer click una función quita la clase active a los otros enlaces y se lo añade al link pulsado. Y se carga el html requerido en el div:
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
$(window).on("load",function()
{cargarDiv("#pageMain","views/inicio.html");
$("#inicio").click(function(){
$("#liContacto").removeClass( "active" );
$("#liCredident").removeClass( "active" );
$("#liAdmin").removeClass( "active" );
$("#liInicio").addClass( "active" );
cargarDiv("#pageMain","views/inicio.html");
});
$("#contacto").click(function(){
$("#liContacto").addClass( "active" );
$("#liCredident").removeClass( "active" );
$("#liAdmin").removeClass( "active" );
$("#liInicio").removeClass( "active" );
cargarDiv("#pageMain","views/contacto.html");
});
$("#credident").click(function(){
$("#liContacto").removeClass( "active" );
$("#liAdmin").removeClass( "active" );
$("#liCredident").addClass( "active" );
$("#liInicio").removeClass( "active" );
cargarDiv("#pageMain","views/credident.html");
});
$("#admin").click(function(){
$("#liContacto").removeClass( "active" );
$("#liAdmin").addClass( "active" );
$("#liInicio").removeClass( "active" );
$("#liCredident").removeClass( "active" );
cargarDiv("#pageMain","views/admin.html");
});
function cargarDiv(div,url)
{$(div).load(url);
}});
El navbar es copiado de librosweb y lo he usado otras veces con páginas "normalitas":
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
<nav class="navbar navbar-default navbar-fixed-top" 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="http://localhost/credident/">Silvia Cantillo</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 navbar-right">
<li class="active" id="liInicio"><a id="inicio">Inicio</a></li>
<li id="liCredident"><a id="credident">Credident +</a></li>
<li id="liContacto"><a id="contacto">Contacto</a></li>
<li id="liAdmin"><a id="admin">Admin</a></li>
<li class="divider"></li>
</ul>
</div>
</nav>
Si alguien puede aclararme un poco le agradezco mucho.
Valora esta pregunta
0