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!

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，这也将起作用。

单击下一个元素时，将删除第一个元素样式

2 个答案: