I can not figure out how to make so that the active color was only one pressed button. Now just the color is added to each button after clicking

$('.view-btn').click(function(){ $(this).css("background", "#0074d6"); }); 
 .view-btn { cursor: pointer; padding: 15px; color: #fff; background: blue; display: inline-block; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="view-btn"> * </div> <div class="view-btn"> * </div> <div class="view-btn"> * </div>

    2 answers 2

     $('.view-btn').click(function(){ $('.view-btn').removeClass("active"); $(this).addClass("active"); }); 
     .view-btn { cursor: pointer; padding: 15px; color: #fff; background: blue; display: inline-block; } .active { background: #0074d6; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="view-btn"> * </div> <div class="view-btn"> * </div> <div class="view-btn"> * </div>

    without active class

     $('.view-btn').click(function(){ $('.view-btn').css("background", ""); $(this).css("background", "#0074d6"); }); 
     .view-btn { cursor: pointer; padding: 15px; color: #fff; background: blue; display: inline-block; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="view-btn"> * </div> <div class="view-btn"> * </div> <div class="view-btn"> * </div>

    • Is it possible without an active class? - stiv
    • 2
      @StepanIvanov It is possible, but not worth it. Inline styles are not good. - Hikikomori

    You can even without JavaScript

     .view-btn{ display:inline-block; position:relative; width:30px; } .view-btn input{ display:block; position:absolute; top:0; left:0; margin:0; width:100%; height:100%; opacity:0; cursor:pointer; } .view-btn span{ display:block; width:100%; line-height:30px; text-align:center; background-color:#acd; } .view-btn :checked + span{ background-color:#cda; } 
     <div class="view-btn"> <input type="radio" name="btn" /> <span>*</span> </div> <div class="view-btn"> <input type="radio" name="btn" /> <span>*</span> </div> <div class="view-btn"> <input type="radio" name="btn" /> <span>*</span> </div> <div class="view-btn"> <input type="radio" name="btn" /> <span>*</span> </div> <div class="view-btn"> <input type="radio" name="btn" /> <span>*</span> </div>