jq-按钮选中样式

最新推荐文章于 2023-04-08 08:26:09 发布

转载最新推荐文章于 2023-04-08 08:26:09 发布 · 1.4k 阅读

文章标签：

#jquery

js 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现按钮激活状态切换的方法。当点击某个按钮时，该按钮将保持激活状态，而其他按钮则恢复到默认状态。此功能通过jQuery库实现。

想实现如图效果，设置好了按钮的不同状态样式，想在点击某个按钮后保存.active的样式，其他的恢复默认样式：

这里写图片描述


<div class="Box">
    <span> 9:00~11:00</span>
    <span> 9:00~11:00</span>
    <span> 9:00~11:00</span>
    <span> 9:00~11:00</span>
    <span> 9:00~11:00</span>
    <span> 9:00~11:00</span>
</div>


<script type="text/javascript">  
    $(".Box span").click(function(){
    $(".Box span").removeClass("active");
    $(this).addClass("active");
});  
</script>