为按钮列表添加活动类

Question

我想将活动类添加到按钮列表中。有没有用于激活按钮类的JavaScript？

<div class="col-md-12 text-center">
    <button class="filter-button btn" data-filter="all"><span class="caps">A</span>ll</button>
    <button class="filter-button btn" data-filter="category1"><span class="caps">C</span>ataract</button>
    <button class="filter-button btn" data-filter="category2"><span class="caps">L</span>asik</button>
    <button class="filter-button btn" data-filter="category3"><span class="caps">O</span>phthalmology</button>
    <button class="filter-button btn" data-filter="category4"><span class="caps">G</span>laucoma</button>
    <button class="filter-button btn" data-filter="category5"><span class="caps">R</span>etina</button>
    <button class="filter-button btn" data-filter="category6"><span class="caps">O</span>pticaI lens</button>
</div>

我想在点击时将按钮设置为激活状态。

Answer 1

你可以使用jQuery：

$(document).ready(function() { var buttons = $('.btn'); buttons.change(function() { //$('.btn.active').removeClass('active'); //Uncomment this line if you want to remove active class from other buttons if another button is pressed. $(this).addClass('active'); }); });

Answer 2

使用jquery add class并删除类函数：

$（＆＃34; your_list_id＆＃34;）。click（function（）{

if ($(this).find('#menu li').hasClass('active')) {
    //console.log("Active class seen");
    $(this).find('#menu li').removeClass('active');
    $(this).addClass('active');
}

}）;