[SOLUCIONADO] Menu addClass

[Jose789]

Hola gente nuevamente necesito vuestra ayuda... tengo un menú pero quiero hacer que cuando hagan click en la sección del menú se le añada el class="active" y cuando hagan click en otra seccion se borre el class de la primera y se coloque en la actual....

Código Javascript:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('a#menu-' +item).click(function(){
$(this).addClass('active');
});
});
</script>
 
<div id="menu">
<a id="menu-home" href="#" onclick="menu('home');"><img  src="<?=$url?>assets/images/icons/credits.png" style="margin-top:5px;">Inicio</a>
<a id="menu-news" href="#" onclick="menu('news');"><img  src="<?=$url?>assets/images/icons/news.png" style="margin-top:5px;">Noticias</a>
<a id="menu-comunidad" href="#" onclick="menu('comunidad');"><img  src="<?=$url?>assets/images/icons/community2.png">Comunidad</a>
<a id="menu-shop" href="#" onclick="menu('shop');"><img  src="<?=$url?>assets/images/icons/duckets.png" style="margin-top:5px;">Duckets</a>
</div>
 

[jonni09lo]

Tienes un código bastante "sucio", no es necesario tener cada link con un id, simplemente puedes hacer esto:

Código HTML:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('#menu a').click(function(){
        $('#menu a').removeClass('active');
        $(this).addClass('active');
    });
});
</script>
 
<div id="menu">
    <a href="#"><img  src="<?=$url?>assets/images/icons/credits.png" style="margin-top:5px;">Inicio</a>
    <a href="#"><img  src="<?=$url?>assets/images/icons/news.png" style="margin-top:5px;">Noticias</a>
    <a href="#"><img  src="<?=$url?>assets/images/icons/community2.png">Comunidad</a>
    <a href="#"><img  src="<?=$url?>assets/images/icons/duckets.png" style="margin-top:5px;">Duckets</a>
</div>
 

Con eso bastará.

Saludos

[Jose789]

Iniciado por jonni09lo

Tienes un código bastante "sucio", no es necesario tener cada link con un id, simplemente puedes hacer esto:

Código HTML:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('#menu a').click(function(){
        $('#menu a').removeClass('active');
        $(this).addClass('active');
    });
});
</script>
 
<div id="menu">
    <a href="#"><img  src="<?=$url?>assets/images/icons/credits.png" style="margin-top:5px;">Inicio</a>
    <a href="#"><img  src="<?=$url?>assets/images/icons/news.png" style="margin-top:5px;">Noticias</a>
    <a href="#"><img  src="<?=$url?>assets/images/icons/community2.png">Comunidad</a>
    <a href="#"><img  src="<?=$url?>assets/images/icons/duckets.png" style="margin-top:5px;">Duckets</a>
</div>
 

Con eso bastará.

Saludos

Muchisimas Gracias por la ayuda. :)