按钮背景颜色更改答案

【问题标题】：Button Background Color change按钮背景颜色更改
【发布时间】：2015-11-17 04:32:00
【问题描述】：

我在 HEADER 部分有 4 个按钮（B1、B2、B3、B4），每个按钮都重定向到同一选项卡中的不同页面。

按钮背景颜色为白色。

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

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

现在我的要求是：

每当我点击特定按钮时，该特定按钮的背景颜色仅应更改为另一种颜色（例如：红色）其余仅显示为白色。

EX：如果我点击 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>

【问题讨论】：

可以在url中使用ajax、#等，纯css是不行的。
为当前页面按钮添加一个特定的类。使用它您可以更改按钮的背景颜色

标签： javascript jquery html css

【解决方案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
}

【讨论】：

【解决方案2】：

最好的方法是使用 AJAX。否则，如果您要重新加载整个页面，单击的按钮可能必须将其存储到 session 或 db 之类的地方（这不是一个好习惯），或者通过像 page.php?id=b1 这样的 url。

CSS：

    .HeaderButtons
     {
         width:15%;
         background-color:WHITE;
      }
     .HeaderButtonsRed {
        background-color:red !important;
     }

JS：

$(document).ready(function(){
   $(".HeaderButtons").click(function () {
      if ($(this).hasClass('HeaderButtonsRed')) {
          $(this).removeClass('HeaderButtonsRed');
      } else {
          $(".HeaderButtons").removeClass('HeaderButtonsRed');
          $(this).addClass('HeaderButtonsRed');
      }
   });
});

【讨论】：

【解决方案3】：

我认为如果页面重定向/刷新比你无法使用纯 css 实现，那么你可以在不向 URL 添加参数的情况下完成它，如其他 cmets 中所述不过你可以试试cookies，我没试过，你可以用jQuery cookie plugin试试。

$('.b1').click(function(){
  var clicks = $(this).data('clicks');
  if(clicks && $.cookie("yourcookiename")=='')
  {
     $.cookie("yourcookiename","yourcookieval");
     // $('.b1').css('background-color','red'); then redirect page code
  }
  else
  {
    // $.removeCookie("yourcookiename"); & then $('.b1').css('background-color','white');
  }
  $(this).data("clicks", !clicks);
});

【讨论】：

【解决方案4】：

有很多方法可以实现这一点，而最好的方法最终将取决于您的应用程序、个人品味和各种其他因素。需要考虑的事项：

这是一种使用HTML localStorage 将按钮ID 存储在点击事件中的方法，如下所示。然后，您可以无限期地在同一域的任何位置获取后续页面加载/重新加载的值。

演示：http://buttons.demo.zuma-design.com/button-demo-a.html

<!DOCTYPE html>
<html>
    <head>
    <style>
        .HeaderButtons {
            width: 15%;
            background-color: WHITE;
        }
    </style>
    </head>
    <body>
        <div id="Header">
            <input type="button" name="B1" id="B1" value="B1" class="HeaderButtons" onclick="setButton(this.id); window.location.href=window.location.href">&nbsp;           
            <input type="button" name="B2" id="B2" value="B2" class="HeaderButtons" onclick="setButton(this.id); window.location.href=window.location.href">&nbsp;
            <input type="button" name="B3" id="B3" value="B3" class="HeaderButtons" onclick="setButton(this.id); window.location.href=window.location.href">&nbsp;
            <input type="button" name="B4" id="B4" value="B4" class="HeaderButtons" onclick="setButton(this.id); window.location.href=window.location.href">&nbsp;
        </div>
        <script type="text/javascript">
            function setButton(value) {
                localStorage.setItem("buttonID", value);
            }
            if (localStorage.buttonID) {
                document.getElementById(localStorage.buttonID).style.backgroundColor = "RED";
            }
        </script>
    </body>
</html>

【讨论】：

【解决方案5】：

感谢您的建议和回答，但重点是，我不想在按钮单击时编写脚本代码，因为页面会在单击按钮时重新加载，因此无法在该事件中保持背景颜色。

我得到了解决方案，它有点旧，但它完全适合我。但我需要做硬编码。如果提供任何其他解决方案将不胜感激。

这是我的 Jquery/Javascript 代码：

 $(document).ready(function () 
  { 
   var pageURl=window.location.href;

   if(pageURl.indexOf("Page1.aspx") >-1)
   {
       $('#B1').addClass('ButtonBackColorred');
   }

   if(pageURl.indexOf("{Page2.aspx") >-1)
   {
       $('#B2').addClass('ButtonBackColorred');
   }

   if(pageURl.indexOf("Page3.aspx") >-1)
   {
       $('#B3').addClass('ButtonBackColorred');
   }

   if(pageURl.indexOf("Page4") >-1)
   {
       $('#B4').addClass('ButtonBackColorred');
   }

   $('#B1').click(function()
      {
       window.location=".../Page1.aspx";
    });

$('#B2').click(function()
      {
       window.location=".../Page2.aspx";
    });

$('#B3').click(function()
      {
       window.location=".../Page3.aspx";
    });

$('#B4').click(function()
      {
       window.location=".../Page4.aspx";
    });

});

【讨论】：

【解决方案6】：

嗯，这是一段比较简单的jquery。方法如下：

$('#*button id*').css('background-color', '#ff0000');

这只是按钮颜色变化的代码。

【讨论】：