Javascript 如何在自定义列表组中添加活动的单击事件类?
以下是我的自定义列表组代码。如何在单击项目列表时添加活动类Javascript 如何在自定义列表组中添加活动的单击事件类?,javascript,reactjs,twitter-bootstrap,Javascript,Reactjs,Twitter Bootstrap,以下是我的自定义列表组代码。如何在单击项目列表时添加活动类 <div class="list-group"> <a href="#!" class="list-group-item list-group-item-action flex-column align-items-start active"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb
<div class="list-group">
<a href="#!" class="list-group-item list-group-item-action flex-column align-items-start active">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-2 h5">List group item heading</h5>
<small>3 days ago</small>
</div>
<p class="mb-2">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius
blandit.</p>
<small>Donec id elit non mi porta.</small>
</a>
<a href="#!" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-2 h5">List group item heading</h5>
<small class="text-muted">3 days ago</small>
</div>
<p class="mb-2">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius
blandit.</p>
<small class="text-muted">Donec id elit non mi porta.</small>
</a>
<a href="#!" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-2 h5">List group item heading</h5>
<small class="text-muted">3 days ago</small>
</div>
<p class="mb-2">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius
blandit.</p>
<small class="text-muted">Donec id elit non mi porta.</small>
</a>
</div>
虽然它将出现在我的react应用程序中,但jquery中的解决方案对我来说很好。您可以通过将处理程序添加到
列表组项的click事件中来实现这一点
以下几点应该有效
$(".list-group-item").click(function(){
var listItems = $(".list-group-item"); //Select all list items
//Remove 'active' tag for all list items
for (let i = 0; i < listItems.length; i++) {
listItems[i].classList.remove("active");
}
//Add 'active' tag for currently selected item
this.classList.add("active");
});
$(“.list group item”)。单击(函数(){
var listItems=$(“.list group item”);//选择所有列表项
//删除所有列表项的“活动”标记
对于(设i=0;i
查看帮助以删除类使用普通Javascript:元素.classList.add('className')
和元素.classList.remove('className')
应该可以解决这个问题。这里更大的问题是,由于锚定标记有很多子元素,单击事件后,我无法获得对它的引用,而是对p标记或h标记的引用,因此无法将活动类添加到标记中。