javascript - 按钮背景颜色更改

Question

我在标题部分有 4 个按钮(B1、B2、B3、B4)，每个按钮重定向到同一选项卡中的不同页面。

按钮背景颜色为白色。

每当我点击特定按钮时，整个页面都会重新加载并重定向到特定按钮页面。

注意:标题部分包含在所有 4 个按钮页面中。

现在我的要求是:

每当我点击特定按钮时，该特定按钮的背景颜色只应更改为另一种颜色(例如:红色)，其余颜色仅为白色。

例如:如果我点击 B1 按钮，页面应该重新加载，然后 B1 按钮的背景颜色应该变成红色，剩下的应该是白色。

如何在 Jquery 或 Java 脚本或 CSS 中做到这一点？

请。帮助我。

.HeaderButtons {
  width: 15%;
  background-color: WHITE;
}

<div id="Header">
  <input type="button" name="B1" id="B1" value="B1" class="HeaderButtons">&nbsp;
  <input type="button" name="B2" id="B2" value="B2" class="HeaderButtons">&nbsp;
  <input type="button" name="B3" id="B3" value="B3" class="HeaderButtons">&nbsp;
  <input type="button" name="B4" id="B4" value="B4" class="HeaderButtons">&nbsp;
</div>

Answer 1

这听起来像是您试图根据 URL 在按钮上设置事件状态，对本文稍作更改以使用按钮而不是链接 https://css-tricks.com/snippets/jquery/add-active-navigation-class-based-on-url/

<div id="Header">
  <input data-href="/" type="button" name="B1" id="B1" value="B1" class="HeaderButtons">&nbsp;
  <input data-href="/page1/" type="button" name="B2" id="B2" value="B2" class="HeaderButtons">&nbsp;
  <input data-href="/page2/" type="button" name="B3" id="B3" value="B3" class="HeaderButtons">&nbsp;
  <input data-href="/page3/" type="button" name="B4" id="B4" value="B4" class="HeaderButtons">&nbsp;
</div>

<script>
   //jQuery code that adds active class to the button that has the URL path as its data-href attribute 
   $(function() {
      $('input[data-href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');
   });
</script>

.HeaderButtons.active {
   background-color: RED; //CSS to change the button color
}