javascript - How to Change Button Colors on Click with Multiple Buttons - Stack Overflow

admin管理员组

文章数量:1315319

I have a button that needs to be active when the page loads with two other buttons that are not active. When clicking on an inactive button, I need to remove the active class from the other button and add it to the clicked button.

$("button").click(function () {
      clicked = true;
      if (clicked) {
        $(this).toggleClass('active');
        clicked = true;
      } else {
        $(this).removeClass('active');
        clicked = false;
      }
    });

.featuredBtn.active {
  background-color: #bf9471;
  color: white;
}

.featuredBtn {
  width: 250px;
  height: 50px;
  color: #8c8c8c;
  font-weight: 700;
  background-color: #f4efeb;
  border: none;
  letter-spacing: 2px;
  outline: none;
}

<script src=".3.1/jquery.min.js"></script>
<div class="row">
  <div class="col-lg-12 col-xs-12" style="text-align: center;">
    <button type="button" class="featuredBtn active" id="btnOne">BUTTON ONE</button>
    <button type="button" class="featuredBtn" id="btnTwo">BUTTON TWO</button>
    <button type="button" class="featuredBtn" id="btnThree">BUTTON THREE</button>
  </div>
</div>

I have a button that needs to be active when the page loads with two other buttons that are not active. When clicking on an inactive button, I need to remove the active class from the other button and add it to the clicked button.

$("button").click(function () {
      clicked = true;
      if (clicked) {
        $(this).toggleClass('active');
        clicked = true;
      } else {
        $(this).removeClass('active');
        clicked = false;
      }
    });

.featuredBtn.active {
  background-color: #bf9471;
  color: white;
}

.featuredBtn {
  width: 250px;
  height: 50px;
  color: #8c8c8c;
  font-weight: 700;
  background-color: #f4efeb;
  border: none;
  letter-spacing: 2px;
  outline: none;
}

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col-lg-12 col-xs-12" style="text-align: center;">
    <button type="button" class="featuredBtn active" id="btnOne">BUTTON ONE</button>
    <button type="button" class="featuredBtn" id="btnTwo">BUTTON TWO</button>
    <button type="button" class="featuredBtn" id="btnThree">BUTTON THREE</button>
  </div>
</div>

A button with the .active class should be removed when a new button is clicked. The new clicked button should then take the .active class.

• javascript
• jquery
• css
• html

Share Improve this question Follow edited Apr 26, 2019 at 19:21 Katelyn asked Apr 26, 2019 at 19:11 KatelynKatelyn 3911 silver badge33 bronze badges 1

• What's the point in including jQuery if you're not going to use it? – j08691 Commented Apr 26, 2019 at 19:17

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

The code isn't working because (clicked) will always be true - it's being set to true every time the function runs, for every button. If you want to check that the clicked button is active, you can set the variable clicked = this.getAttribute('class').includes('active'). If the button has the active class, clicked will be true.

However, we don't even really need to check whether the clicked button is active or not - we can just remove the active class from all buttons and then set it to whichever one has just been clicked using the $(this) selector, below:

$("button").click(function() {
   $("button").removeClass("active");
   $(this).addClass("active");
});

.featuredBtn.active {
  background-color: #bf9471;
  color: white;
}

.featuredBtn {
  width: 250px;
  height: 50px;
  color: #8c8c8c;
  font-weight: 700;
  background-color: #f4efeb;
  border: none;
  letter-spacing: 2px;
  outline: none;
}

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col-lg-12 col-xs-12" style="text-align: center;">
    <button type="button" class="featuredBtn active" id="btnOne">BUTTON ONE</button>
    <button type="button" class="featuredBtn" id="btnTwo">BUTTON TWO</button>
    <button type="button" class="featuredBtn" id="btnThree">BUTTON THREE</button>
  </div>
</div>

I suggest to specify the element more precisely by using class name "featuredBtn". This will avoid binding an event on all buttons on page

$(".featuredBtn").click(function() {
   $("button.active").removeClass("active");
   $(this).addClass("active");
});

i hope this would solve your work check it out; have to just add and remove class

    $("button").click(function() {
       $("button").removeClass("active");
       $(this).addClass("active");
    });


 

   .featuredBtn.active {
      background-color: #bf9471;
      color: white;
    }

    .featuredBtn {
      width: 250px;
      height: 50px;
      color: #8c8c8c;
      font-weight: 700;
      background-color: #f4efeb;
      border: none;
      letter-spacing: 2px;
      outline: none;
    }

    <script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="row">
      <div class="col-lg-12 col-xs-12" style="text-align: center;">
        <button type="button" class="featuredBtn active" id="btnOne">BUTTON ONE</button>
        <button type="button" class="featuredBtn" id="btnTwo">BUTTON TWO</button>
        <button type="button" class="featuredBtn" id="btnThree">BUTTON THREE</button>
      </div>
    </div>

hope it would help in solving your issue

The only extra thing I would add to any of these is to do a check first for the class active. Everything else is mostly personal flavor because there are a few ways to do this and the answers here seem to have it covered

$('.featuredBtn').on('click', function() {
    let featureBtn = $('.featuredBtn');

    if(featureBtn.hasClass('active')) {
        featureBtn.removeClass('active');
        $(this).addClass('active');
    }
});

You can use 'hasClass' to solve this one.

$("button").click(function() {
  if ($(this).hasClass("active")) {
    $(this).removeClass("active");
  } else {
    $(".active").removeClass("active");
    $(this).addClass('active');
  }
});

.featuredBtn.active {
  background-color: #bf9471;
  color: white;
}

.featuredBtn {
  width: 250px;
  height: 50px;
  color: #8c8c8c;
  font-weight: 700;
  background-color: #f4efeb;
  border: none;
  letter-spacing: 2px;
  outline: none;
}

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col-lg-12 col-xs-12" style="text-align: center;">
    <button type="button" class="featuredBtn active" id="btnOne">BUTTON ONE</button>
    <button type="button" class="featuredBtn" id="btnTwo">BUTTON TWO</button>
    <button type="button" class="featuredBtn" id="btnThree">BUTTON THREE</button>
  </div>
</div>

本文标签： javascriptHow to Change Button Colors on Click with Multiple ButtonsStack Overflow