HTML tags won't accept my CSS classes when changed via JavaScript

Question

I'm trying to change the classes of certain HTML elements when clicked on using JavaScript, but having some trouble.

Here's the JavaScript:

$(document).ready(function() {
 $('#subnav li a').click(function(){
    var $this = $(this);
    $this.addClass('highlight').siblings('a').removeClass('highlight');
 });
});

Here's the corresponding HTML:

<div id="subnav">
    <ul id="subnav-ul">
        <li><a href="javascript:;" class="highlight">Click 1</a></li>
        <li><a href="javascript:;">Click 2</a></li>
        <li><a href="javascript:;">Click 3</a></li>
    </ul>
</div>

The single CSS class is as follows:

.highlight {
border-left: 4px solid rgba(51,102,255,.6);
color: rgba(0,0,0,.8);
}

Answer 1

The anchors are not siblings, they are within LI elements that are siblings

$('#subnav li a').click(function(){
    $(this).addClass('highlight')
           .closest('li')
           .siblings('li')
           .find('a')
           .removeClass('highlight');
});

Answer 2

$('#subnav li a').click(function(){
    $(this).addClass('highlight');
    $(this).parent().siblings('li').find('a').removeClass('highlight');

});

Try the above code.

Answer 3

The anchors are not siblings to one another. They are cousins.

Answer 4

It's not removing the highlight class because you have:

$this.addClass('highlight').siblings('a')

when it should be:

$this.parent().siblings('li').find('a')

Example

http://jsfiddle.net/DU7V8/1/

Answer 5

Try this code:

$(function() {
 $('#subnav li a').click(function(){
    $('#subnav li a.highlight').removeClass('highlight'); //remove class in all links
    $(this).addClass('highlight'); //add class in current link
 });
});

$(function(){}); is the shortcut to $(document).ready(function() {});

I hope this help.

Answer 6

lets dont forget about find('a') output is array

Try this:

$(document).ready(function() {
  $('#subnav li a').click(function(){
    $(this).addClass('highlight');
    $(this).parent().siblings('li').find('a').each(function(){
      $(this).removeClass('highlight');
    });
  });
});

See on jsFiddle