当页面加载其他两个不活动的按钮时，我有一个按钮需要处于活动状态。单击非活动按钮时，我需要从另一个按钮中删除活动类并将其添加到单击的按钮中。
$("button").click(function () {
clicked = true;
if (clicked) {
$(this).toggleClass('active');
clicked = true;
} else {
$(this).removeClass('active');
clicked = false;
}
});
.featuredBtn.active {
background-color: #bf9471;
color: white;
}
.featuredBtn {
width: 250px;
height: 50px;
color: #8c8c8c;
font-weight: 700;
background-color: #f4efeb;
border: none;
letter-spacing: 2px;
outline: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-12 col-xs-12" style="text-align: center;">
<button type="button" class="featuredBtn active" id="btnOne">BUTTON ONE</button>
<button type="button" class="featuredBtn" id="btnTwo">BUTTON TWO</button>
<button type="button" class="featuredBtn" id="btnThree">BUTTON THREE</button>
</div>
</div>
单击新按钮时，应删除具有 .active 类的按钮。新单击的按钮应采用 .active 类。
该代码不起作用，因为(clicked)始终为 true - 每次函数运行时，每个按钮都会将其设置为 true。如果要检查单击的按钮是否处于活动状态，可以设置变量clicked = this.getAttribute('class').includes('active')。如果按钮有active class, clicked将会是真的。
然而，我们甚至不需要检查单击的按钮是否处于活动状态 - 我们只需删除active从所有按钮中选择一个类，然后将其设置为刚刚使用$(this)选择器，如下：
$("button").click(function() {
$("button").removeClass("active");
$(this).addClass("active");
});
.featuredBtn.active {
background-color: #bf9471;
color: white;
}
.featuredBtn {
width: 250px;
height: 50px;
color: #8c8c8c;
font-weight: 700;
background-color: #f4efeb;
border: none;
letter-spacing: 2px;
outline: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-12 col-xs-12" style="text-align: center;">
<button type="button" class="featuredBtn active" id="btnOne">BUTTON ONE</button>
<button type="button" class="featuredBtn" id="btnTwo">BUTTON TWO</button>
<button type="button" class="featuredBtn" id="btnThree">BUTTON THREE</button>
</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
