当 class 添加到元素时，为什么我的 CSS 没有被应用？

Question

我想要做的是，当我按下一个按钮时，在它周围放一个边框，以显示它处于活动状态。我还试图让 JavaScript 中的按钮处于活动状态，但我还没有做到这一点。谁能帮帮我？

$('button').on('click', function() {
  $('button').removeClass('active_button');
  $(this).addClass('active_button');
});

//Home button active on page load
$(document).ready(function() {
  $('#Home').addClass('active_button');
});

.cable-choose {
  margin-bottom: 20px;
}

.cable-choose button {
  border: 2px solid #E1E8EE;
  border-radius: 6px;
  padding: 13px 20px;
  font-size: 14px;
  color: #5E6977;
  background-color: #fff;
  cursor: pointer;
  transition: all .5s;
}

.cable-choose button:hover,
.cable-choose button:active,
.cable-choose button:focus {
  border: 2px solid #000;
  outline: none;
}

.active_button {
  border: 2px solid black;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<div class="cable-config">
  <span>Select Entries</span>

  <div class="cable-choose">
    <button id="Home">50 Entries<br>.00</button>
    <button>100 Entries<br>.00</button>
    <button>250 Entries<br>.00</button>
    <button>500 Entries<br>.00</button>
  </div>
</div>

Answer 1

我认为它有效 - 当我检查我点击的那个时，我看到 class="active_button"...您的 active_button 风格与您的 hover/focus/active 状态（一个设置为#000，另一个设置为“黑色”-相同颜色）

Answer 2

您只需要让您的 CSS 选择器更 specific。它已被标准按钮样式覆盖。

$('button').on('click', function() {
  $('button').removeClass('active_button');
  $(this).addClass('active_button');
});

//Home button active on page load
$(document).ready(function() {
  $('#Home').addClass('active_button');
});

.cable-choose {
  margin-bottom: 20px;
}

.cable-choose button {
  border: 2px solid #E1E8EE;
  border-radius: 6px;
  padding: 13px 20px;
  font-size: 14px;
  color: #5E6977;
  background-color: #fff;
  cursor: pointer;
  transition: all .5s;
}

.cable-choose button:hover,
.cable-choose button:active,
.cable-choose button:focus {
  border: 2px solid #000;
  outline: none;
}

.cable-choose button.active_button { /* <------------ RIGHT HERE */
  border: 2px solid black;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<div class="cable-config">
  <span>Select Entries</span>

  <div class="cable-choose">
    <button id="Home">50 Entries<br>.00</button>
    <button>100 Entries<br>.00</button>
    <button>250 Entries<br>.00</button>
    <button>500 Entries<br>.00</button>
  </div>
</div>

当 class 添加到元素时，为什么我的 CSS 没有被应用？

Why isn't my CSS being applied when the class is added to the element?

html

javascript

css

button