jquery - 单击下一个元素时删除第一个元素样式

Question

这个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');
});

Here's an example!