Question

This question answered part of what I wanted to do except that when the page first loaded, I can’t get the result for the first element and have it removed when the second element is clicked.

<li><a href="#">first element</a></li>
<li><a href="#">second element</a></li>
<li><a href="#">third element</a></li>

li a {
  border: 1px solid blue
}
.selected {
  border-color: red
}

When the page first loaded, the first element is not clicked and I want it to show the red border color (selected), but when second element is clicked, the red color should be replaced with blue,.

Answer 1

Just add:

$(function() {
  var $lia = $('li').find('a');

  $lia.click(function(e) {
    $lia.removeClass('selected');
    $(this).addClass('selected');
  });

  $lia.first().addClass('selected');
});

Here’s an example!