我有三个分区作为导航表。我想在单击时将活动类添加到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');
}
更新了您的代码以实现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;
}<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>
试试看：
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');
});
});
