应突出显示单击的列表元素

Question

我有一个列表，我希望我在列表中点击的任何元素都应突出显示。我已经使用jQuery来完成任务但不知何故代码不起作用。请更正我的代码，并详细解释。

HTML

<ul class="nav">
 <li class="active"><a>Link 1</li>
 <li><a>Link 2</li>
 <li><a>Link 3</li>
</ul>

CSS

ul.nav a { cursor: pointer; }
.active { color:#f00;font-weight:bolder; }

的jQuery

$(function() {
      $( '.nav li' ).click( function() {
            $( this ).parent().find( '.active' ).removeClass( 'active' );
            $( this ).next().addClass( 'active' );
      });
});

Answer 1

要突出显示当前（点击的）li，您需要跳过定位next()元素，然后将该类添加到li本身：

$(function() {
  $('.nav li').click(function() {
    $(this).parent().find('.active').removeClass('active');
    $(this).addClass('active');
  });
});

ul.nav a {
  cursor: pointer;
}

.active {
  color: #f00;
  font-weight: bolder;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
  <li class="active"><a>Link 1</li>
 <li><a>Link 2</li>
 <li><a>Link 3</li>
</ul>

Answer 2

希望这有助于你

B

$(function() {
      $( '.nav li' ).click( function() {
            $( '.nav li' ).removeClass( 'active' );
            $( this ).addClass( 'active' );
      });
});

ul.nav a { cursor: pointer; }
.active { color:#f00;font-weight:bolder; }