how to add active class to current element?

Admin 1
Viewed 130

I have created a button with classname, and I have created jquery and css as well but why can't be active

this is my html code

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

this id my css file

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

and the last this is my jquery

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

);
css html jquery javascript
2 Answers

Because you set hover in css, and you are missing "}" of end ready. Please try code:

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

user_120559800 

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

I don't see any problem with your code. just a missing curly bracket.

user_95259830
Related