如何將有源 class 添加到當前元素？

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 中設置了 hover，並且您缺少 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>

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>

我認為您的代碼沒有任何問題。 只是缺少一個大括號。