首页 > 解决方案 > 如何将活动类添加到当前元素?

问题描述

我创建了一个带有类名的按钮,我也创建了 jquery 和 css 但是为什么不能激活

这是我的 html 代码

<div class="landing-pages-button-content">
     <a class="btn" id="semua">Semua</a>
     <a class="btn" id="pria">Pria</a>
     <a class="btn" id="wanita">Wanita</a>
</div>

这个 id 我的 css 文件

.active, .btn:hover {background-color: #ff7400;color: white; border: none;}

最后这是我的 jquery

$(document).ready(function () {
        $(".btn").click(function () {
            $(this).addClass("active");
            $(".btn").not(this).removeClass("active");
        });

);

标签: javascriptjqueryhtmlcss

解决方案


因为您在 css 中设置了悬停,并且您缺少 end ready 的“}”。请尝试代码:

$(document).ready(function () {
      $(".btn").click(function () {
          $(this).addClass("active");
          $(".btn").not(this).removeClass("active");
      });

});
.active{background-color: #ff7400;color: white; border: none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<div class="landing-pages-button-content">
     <a class="btn" id="semua">Semua</a>
     <a class="btn" id="pria">Pria</a>
     <a class="btn" id="wanita">Wanita</a>
</div>


推荐阅读