Question

我正在开发一个网站，其中有一个按钮，可在点击时显示菜单。我试图让它在激活时改变颜色，但是当单击按钮时，toggleClass不会改变背景颜色。这是我正在使用的代码。

$(".services-btn").click(function() {
  $(this).toggleClass("active-btn");
});

div.services-btn {
  background-color: black;
  color: #f9f9f9;
  cursor: pointer;
  float: left;
  margin: 10px;
  padding: 15px 0;
  text-align: center;
  width: 80px;
}
.active-btn {
  background-color: darkred;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="services-btn mobile">Services</div>

Answer 1

将CSS更改为此

div.services-btn {
    background-color: black;
    color: #f9f9f9;
    cursor: pointer;
    float: left;
    margin: 10px;
    padding: 15px 0;
    text-align: center;
    width: 80px;
}

div.services-btn.active {
    background-color: darkred;
}

因为在你的jQuery中你添加了.active类，而不是你在CSS上的代码上键入.active-btn。您还可以将jQuery添加类更改为.active-btn，并且不要更改CSS，它也可以正常工作。

Answer 2

激活你的.service-btn类，并使用css为你的活动类做样式。

operator->

你的jquery是故事。 .services-btn { background-color: black; color: #f9f9f9; cursor: pointer; float: left; margin: 10px; padding: 15px 0; text-align: center; width: 80px; } .services-btn.active { background-color: darkred; }应该是一个菜单或您要切换的其他内容。

jQuery toggleClass不工作

2 个答案: