[英]How to add active class on click event in custom list group?
以下是我的自定義列表組的代碼。 單擊項目列表后,如何增加活動班級。
<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-app中,但jquery中的解決方案對我來說很好。
您可以通過將處理程序添加到list-group-item
類的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");
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.