JQuery - Cambiar de color de un boton al hacer click.

   
Vista:

Cambiar de color de un boton al hacer click.

Publicado por Fernando (2 intervenciones) el 25/07/2017 10:48:44
Hola,
Estoy intentando hacer que al hacer click sobre el boton de un menu cambie de color y se quede en ese color hasta que le de a otro boton.
Este es el menu:

Menu

Y este es el codigo del menu:

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
<nav class="nav navbar-nav " >
	<li ><a style="color :white;" href="{{path("blog_entradas")}}">Entradas</a></li>
</nav>
<nav class ="nav navbar-nav ">
	<li><a style="color :white;" href="{{path("blog_index_tag")}}">Etiquetas</a></li>
</nav>
<nav class ="nav navbar-nav ">
	<li><a style="color :white;" href="{{path("blog_index_category")}}">Categorias</a></li>
</nav>
<nav class ="nav navbar-nav ">
	<li><a style="color :white;" href="{{path("modules_index")}}">Modulos HTML</a></li>
</nav>
<nav class ="nav navbar-nav ">
	<li><a style="color :white;" href="{{path("blog_resumen")}}">Administración</a></li>
</nav>
<nav class ="nav navbar-nav" >
	<li><a style="color :white;" href="{{path("blog_index_usuario")}}">Usuarios</a></li>
</nav>
<nav class ="nav navbar-nav ">
	<li><a style="color :white;" href="{{path("menuP_index")}}">Menus</a></li>
</nav>
<nav class ="nav navbar-nav " style="background-color:#1735be ">
	<li role="separator" class="divider"></li>
	<li><a style="color :white;" href="{{path("logout")}}" onclick="return confirm('¿Estas seguro de que quieres salir del sistema?');">Salir</a></li>
</nav>
<script>
$(document).ready(function(){
	$(".nav").click( function() {
		$('.nav').css('background-color','red');
	});
});
</script>

El problema es que al hacer click en el menu este me cambia el color por solo un segundo y lo hace con todos los botones. Me gustaria si alguien me podria decir como lo puedo hacer correctamente.
Lo he probado con addClass pero no me funciona, supongo que algo he hecho mal.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de kip

Cambiar de color de un boton al hacer click.

Publicado por kip (38 intervenciones) el 26/07/2017 05:26:14
Hola, estas hablando de una vez hecho clic y estar en la seccion cuya url coincida con la url de atributo href del link(<a>) este boton se quede de un color para distinguirse a los demas ? Estas usando algun framework ya que veo que usas un sistemas de plantillas, cual es ?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Cambiar de color de un boton al hacer click.

Publicado por Fernando (2 intervenciones) el 26/07/2017 09:10:37
Hola Kip!
Si, como tu dices estoy trabajando con un framwork, el framework es Symfony y el sistema de plantillas es twig.
Ya he encontrado una solución que funciona perfectamente.
A continuación muestro el codigo por si sirve de ayuda a alguien.
Es añadiendo la nivea :
{% set link = app.request.pathinfo %}

Me dice la dirección donde estoy trabajando y el codigo que he utilizado es el siguiente:

{% set link = app.request.pathinfo %}

{% if link in '/entradas' %}
<nav class="nav navbar-nav " >
<li >
<a style="color :white; background-color:#14aac8;" href="{{path("blog_entradas")}}">Entradas</a>
</li>
</nav>
{%else%}
<nav class="nav navbar-nav " >
<li >
<a style="color :white;" href="{{path("blog_entradas")}}">Entradas</a>
</li>
</nav>
{%endif%}

<nav class ="nav navbar-nav ">
<li>
{%if link in '/tags' %}
<a style="color :white; background-color:#14aac8;" href="{{path("blog_index_tag")}}">Etiquetas</a>
{% else %}
<a style="color :white;" href="{{path("blog_index_tag")}}">Etiquetas</a>
{% endif %}
</li>
</nav>
<nav class ="nav navbar-nav ">
<li>
{% if link in '/categories' %}
<a style="color :white; background-color:#14aac8;" href="{{path("blog_index_category")}}">Categorias</a></li>
{%else %}
<a style="color :white;" href="{{path("blog_index_category")}}">Categorias</a></li>
{%endif%}
</nav>
<nav class ="nav navbar-nav ">
<li>
{% if link in '/modules' %}
<a style="color :white; background-color:#14aac8;" href="{{path("modules_index")}}">Modulos HTML</a>
{%else%}
<a style="color :white;" href="{{path("modules_index")}}">Modulos HTML</a>
{%endif%}
</li>
</nav>
<nav class ="nav navbar-nav ">
<li>
{% if link in '/resumen' %}
<a style="color :white; background-color:#14aac8;" href="{{path("blog_resumen")}}">Administración</a>
{%else%}
<a style="color :white;" href="{{path("blog_resumen")}}">Administración</a>
{% endif %}
</li>
</nav>
<nav class ="nav navbar-nav" >
<li>
{% if link in '/usuario' %}
<a style="color :white; background-color:#14aac8;" href="{{path("blog_index_usuario")}}">Usuarios</a>
{% else %}
<a style="color :white;" href="{{path("blog_index_usuario")}}">Usuarios</a>
{% endif %}
</li>
</nav>
<nav class ="nav navbar-nav ">
<li>
{% if link in '/menuPrincipal/' %}
<a style="color :white; background-color:#14aac8;" href="{{path("menuP_index")}}">Menus</a>
{%else%}
<a style="color :white;" href="{{path("menuP_index")}}">Menus</a>
{%endif%}
</li>
</nav>

Ahí va por si sirve de ejemplo a alguíen.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar