如何使用jQuery在nav列表中将活动类添加到div中

Question

我有三个分区作为导航表。我想在单击时将活动类添加到div中。下面是我的代码，但它不能正常工作。请帮我把它修好。

HTML

<div class="list">
    <div class="item" onclick="changeClass(this)">
        <center><i class="fas fa-user"></i><br>Students</center>
    </div>
    <div class="tabActive" onclick="changeClass(this)">
        <center><i class="fas fa-book"></i><br/>Lesson Plan</center>            
    </div>
    <div class="item" onclick="changeClass(this)">
        <center><i class="fas fa-cog"></i><br/>Settings</center>
    </div>
</div>

CSS

.item
{
    height: 60px;
    padding-top: 20px;
    background: #f8f9fa;        
}

.tabActive{
    background: #87ceeb69;
    border-left: 3px solid blue;
    height: 60px;
    padding-top: 20px;
}

JS

function changeClass() {
    var divsLenght = $(".list").children().length;
    for (var i = 0; i < divsLenght; i++) { 
        $('.list').children(i).toggleClass('tabActive item');
    } 
    $(this).addClass('tabActive');  
}

Answer 1

试试看：

HTML

<div class="list">
<div class="item" >
    <center><i class="fas fa-user"></i><br>Students</center>
</div>
<div class="item" >
    <center><i class="fas fa-book"></i><br/>Lesson Plan</center>            
</div>
<div class="item" >
    <center><i class="fas fa-cog"></i><br/>Settings</center>
</div>

$(document).ready(function(){
  $(".item").click(function(){
$('.item').removeClass('tabActive'); 
$(this).addClass('tabActive'); 
});
});

Answer 2

更新了您的代码以实现jQuery的相同功能。

null

$(document).ready(function(){
  $('div.item').click(function(){
    $('.item').removeClass('tabActive');
    $(this).addClass('tabActive');
  });
});

.item
{
    height: 60px;
    padding-top: 20px;
    background: #f8f9fa;        
}

.tabActive{
    background: #87ceeb69;
    border-left: 3px solid blue;
    height: 60px;
    padding-top: 20px;
}

html prettyprint-override"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="list">
    <div class="item">
        <center><i class="fas fa-user"></i><br>Students</center>
    </div>
    <div class="item tabActive">
        <center><i class="fas fa-book"></i><br/>Lesson Plan</center>            
    </div>
    <div class="item">
        <center><i class="fas fa-cog"></i><br/>Settings</center>
    </div>
</div>