Question

我用类名创建了一个按钮，并且我还创建了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");
        });

);

Answer 1

因为您在css中设置了悬停，并且缺少结尾的“}”。请尝试输入代码：

$(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>

Answer 2

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

});

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/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>

我看不到您的代码有任何问题。只是缺少花括号。

如何添加活动类到当前元素？

2 个答案: