Script class seleccionado

Tengo la siguiente lista en mi HTML

Código HTML :

<div class="block audio">
  <ul>
    <li>
      <a>Español</a>
    </li>
    <li>
      <a>Ingles</a>
    </li>
  </ul>
</div

Y aca mi codigo javascript que se supone que si le doy click a "<a>Español</a>" o a "<a>Ingles</a>" me tiene que agregar la clase "sel" al que le halla dado clic:

Código Javascript :

$(document).ready(function(){
    $(".audio > a").click(function(e){
        var a = e.target.id;
        //desactivamos seccion y activamos elemento de menu
        $(".audio a.sel").removeClass("sel");
        $(".audio #"+a).addClass("sel");
        //ocultamos divisiones, mostramos la seleccionada
        $(".trailer").css("display", "none");
        $("."+a).fadeIn();
    });
});

He probado agregándole ul li después de .audio y no me funciona como debería de ser, acá les dejo el link de la pagina en donde me ocurre este problema.
http://goo.gl/xmA0F3

Les agradecería muchísimo si me ayudasen con esto, Gracias!

El operador > en CSS indica que el selector que está a la derecha debe ser hijo inmediato del selector que está a la izquierda.

En tu caso el tag a no es hijo inmediato de la clase .audio. Creo que deberías cambiar eso por:

Código Javascript :

$(".audio ul li > a").click(...

Aunque eso también es redundante. También funciona con:

Código Javascript :

$(".audio a").click(...

A propósito, dentro del manejador del evento jQuery, el identificador this se refiere al elemento donde se provocó el evento.

Si he intentado haciendo eso, pero solo me lo remueve mas no me lo coloca en el otro:

Código Javascript :

$(document).ready(function(){
    $(".audio ul li > a").click(function(e){
        var a = e.target.id;
        //desactivamos seccion y activamos elemento de menu
        $(".audio a.sel").removeClass("sel");
        $(".audio #"+a).addClass("sel");
        //ocultamos divisiones, mostramos la seleccionada
        $(".trailer").css("display", "none");
        $("."+a).fadeIn();
    });
});

Tambien he echo lo siguiente:

Código Javascript :

$(document).ready(function(){
    $(".audio ul li > a").click(function(e){
        var a = e.target.id;
        //desactivamos seccion y activamos elemento de menu
        $(".audio a.sel").removeClass("sel");
        $(".audio a).addClass("sel");
        //ocultamos divisiones, mostramos la seleccionada
        $(".trailer").css("display", "none");
        $("."+a).fadeIn();
    });
});

Me agrega la clase "sel" a donde hago clic pero no lo elimina del otro
http://goo.gl/xmA0F3

En vez de

Código Javascript :

$(".audio a.sel").removeClass("sel");

Haz:

Código Javascript :

$(".audio a").removeClass("sel");

Lo acabo de hacer y me da el mismo resultado:

Código Javascript :

$(document).ready(function(){
    $(".audio ul li > a").click(function(e){
        var a = e.target.id;
        //desactivamos seccion y activamos elemento de menu
        $(".audio a").removeClass("sel");
        $(".audio a").addClass("sel");
        //ocultamos divisiones, mostramos la seleccionada
        $(".trailer").css("display", "none");
        $("."+a).fadeIn();
    });
});

Le he añadido una tercera opcion y como ven al dar clic en un <li><a> se selecciona todos, me parece raro esto ya que en la parte baja de mi web en donde dice criticas, informacion, trailer, etc no me sale este error lo unico diferente es que no se lo aplico a un <li><a> sino solo a un <li>

Ya te recuerdo, eres el que no le investiga mucho en fin.

Si aplicas el remove class, dentro del addClass lo unico que haces es contradecir lo que estas haciendo.

Lo que debes de hacer en tu click function es buscar primero en todos los "<li><a class="sel">".. y a cada uno de estos quitarle la clase sel.

despues como le acabas de dar click a uno este adoptara la clase "sel" que le estas asignando.

Resumiendo:

a.onClick: (cuando se hace clic en un li)

1. buscar todos los <li><a> que tengan la clase "sel".
2. quitar a todos los <li><a> anteriores la clase "sel"
3. agregar la clase "sel" al <li><a> que activo el evento 'a.onClick'

Código Javascript :

$(".audio a").addClass("sel");

cambia el selector por $(this)

Bendito sea tu bullying elporfirio estuve probando de mil y un maneras hasta que encontré la solución, resulta que en cada <a> se le tenia que poner un id para saber a que caja activaba:

Código Javascript :

$(document).ready(function(){
$(".audio ul li > a").click(function(e){
var a = e.target.id;
//desactivamos seccion y activamos elemento de menu
$(".audio a.sel").removeClass("sel");
$(".audio #"+a).addClass("sel");
//ocultamos divisiones, mostramos la seleccionada
$(".trailer").css("display", "none");
$("."+a).fadeIn();
});
});

Código HTML :

<div class="audio">
<ul>
<li><a id="Español" class="sel">Español</a></li>
<li><a id="Inglés">Inglés</a></li>
</ul>
</div>

Y haci funciono http://goo.gl/xmA0F3

Posdata feliz fin de semana a todos

Jejejeje es que saber programar no es solo conocer el lenguaje, si no hacer una logica de pensamiento.

Es como filosofar pero más divertido yeah!!!!

Saludos