javascript - 为什么我的 标签选择不起作用？

Question

我有这个代码:

<div class="list-group" id="generalView">
    <a href="" id="today" onclick="displayData()" class="list-group-item" data-toggle="modal" data-target="#displayDiary">
        <h4 class="list-group-item-heading">Today's Diary</h4>
    </a>
    <a href="" class="list-group-item">
        <h4 class="list-group-item-heading">Last Week's Diaries</h4>
    </a>
    <a href="" class="list-group-item">
        <h4 class="list-group-item-heading">Last Month's Diaries</h4>
    </a>
</div>

$('#generalView > a').click(function(e) {
    e.preventDefault();
    $('#generalView > a').removeClass('active');
    $(this).addClass('active');
});

我要加类active当 <a>标签被点击但我的选择不起作用。我选错了吗？我已经尝试给每个 <a> 上一个类元素，然后尝试选择该类，但效果不佳。为什么会这样？

Answer 1

这是一个简单的解决方案，在每个 a 标签上使用一个类。希望对您有所帮助!

$(document).ready(function(){
  $('#generalView > a').click(function() {
    $('.myClass').removeClass('active');
    $(this).addClass('active');
    return false;
});

});

.active {
    color: red;
}

<script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="list-group" id="generalView">
    <a href="" id="today" onclick="displayData()" class="list-group-item myClass" data-toggle="modal" data-target="#displayDiary">
        <h4 class="list-group-item-heading">Today's Diary</h4>
    </a>
    <a href="" class="list-group-item myClass">
        <h4 class="list-group-item-heading">Last Week's Diaries</h4>
    </a>
    <a href="" class="list-group-item myClass">
        <h4 class="list-group-item-heading">Last Month's Diaries</h4>
    </a>
</div>