сделать, чтобы стиль первого элемента был удален при нажатии следующего элемента

Question

Этот вопрос ответил на часть того, что я хотел сделать, за исключением того, что при первой загрузке страницы я не могу получить результат для первого элемента и удалить его при нажатии на второй элемент.

<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
}

Когда страница загружается впервые, первый элемент не щелкается, и я хочу, чтобы он отображал цвет красной границы (выбранный), но когда щелкает второй элемент, красный цвет должен быть заменен на синий,

Answer 1

Просто добавьте:

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

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

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

Вот пример!

Answer 2

HTML:

<ul class="options">   
 <li class="selected"><a href="#">first element</a></li>
 <li><a href="#">second element</a></li>
 <li><a href="#">third element</a></li>
</ul>    

JavaScript:

 $(function() {
       $('ul.options').delegate('li a', 'click', function() {
          $('li.selected').removeClass('selected');
          $(this).addClass('selected');
       });  
     });

Вам не нужно добавлять класс в первый элемент с JavaScript, он всегда должен быть там, когда страницазагружается, и это будет работать также, если новые li добавляются динамически.