按钮背景颜色变化

Question

I have 4 buttons(B1,B2,B3,B4) in HEADER section,Each button redirects to different page in the same tab. 我在HEADER部分有4个按钮（B1，B2，B3，B4），每个按钮都重定向到同一选项卡中的不同页面。

Button background color is WHITE. 按钮背景颜色为白色。

Whenever I clicked on specific button, entire page will reload and redirects to specific button page. 每当我单击特定按钮时，整个页面都会重新加载并重定向到特定按钮页面。

NOTE: Header section is included in all 4 button pages. 注意：页眉部分包含在所有4个按钮页面中。

Now my requirement is : 现在我的要求是：

Whenever I click on specific button, that specific button back ground color only should change to another color(say ex: RED) rest showld be WHITE color only. 每当我单击特定按钮时，仅该特定按钮的背景色应更改为另一种颜色（例如：红色），其余部分仅显示为白色。

EX: If i click B1 button, page should reload, then back ground color of B1 button should change to RED rest should be WHITE. 例：如果我单击B1按钮，页面应重新加载，然后B1按钮的背景色应更改为红色，其余应为白色。

How to do this in Jquery or Java script or CSS? 如何在Jquery或Java脚本或CSS中做到这一点？

Pls. 请 assist me. 协助我。

 .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

It sounds like your trying to set an active state on button based on the URL, using a slight change on this article to use buttons rather than links https://css-tricks.com/snippets/jquery/add-active-navigation-class-based-on-url/ 这听起来像是您尝试根据URL在按钮上设置活动状态，在本文上进行了一些细微更改以使用按钮而不是链接https://css-tricks.com/snippets/jquery/add-active-navigation-基于网址的类/

<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
}

Answer 2

Best approach is to use AJAX . 最好的方法是使用AJAX 。 Otherwise if you are reloading the entire page, the clicked button you may have to store it into somewhere like session or db(Which is not a good practice) or pass through the url like page.php?id=b1 . 否则，如果您要重新加载整个页面，则单击的按钮可能必须将其存储到会话或db之类的地方（这不是一个好习惯），或者通过诸如page.php?id=b1类的URL进行传递。

CSS: CSS：

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

JS: JS：

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

Answer 3

I think if the page redirects/refresh than U cant achive using pure css nither you can do it without adding parameters to URL as discribed in other comments But you can give a try on cookies, I havent tried applying it but you can try it using jQuery cookie plugin . 我认为，如果页面重定向/刷新比使用纯css nither无法完成，则可以在不向其他评论中描述的URL添加参数的情况下完成此操作，但是您可以尝试使用cookie，但我还没有尝试应用它，但是可以尝试使用jQuery cookie插件。

$('.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);
});

Answer 4

There are many ways to achieve this and the best method is ultimately going to depend on your application, personal taste and a wide array of other factors. 有许多方法可以实现这一目标，而最佳方法最终将取决于您的应用程序，个人品味和各种各样的其他因素。 Things to consider: 注意事项：

cookies 饼干
html localStorage html localStorage
html sessionStorage html sessionStorage
http url paramters http url参数
php sessions PHP会话

Here's a method using HTML localStorage to store the button id on a click event like below. 这是一种使用HTML localStorage将按钮id存储在如下所示的click事件上的方法。 You can then fetch the value on subsequent page load/reload anywhere on the same domain indefinitely. 然后，您可以无限期地在同一域中的任何位置的后续页面加载/重新加载时获取该值。

DEMO: http://buttons.demo.zuma-design.com/button-demo-a.html 演示： 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>

Answer 5

Thanks for your suggestions and answers, but the point is , I dont want script code on button click since Page will reload on click of button, hence unable to keep back ground color at that event. 感谢您的建议和答案，但重点是，我不想单击按钮时使用脚本代码，因为Page将在单击按钮时重新加载，因此在该事件中无法保留背景色。

I got solution ,it is a bit old, but it works for me exactly. 我有解决方案，它有点旧，但是对我来说确实有用。 But I need to do hard coded. 但是我需要进行硬编码。 If any other solutions provided will be appreciated. 如果提供任何其他解决方案，将不胜感激。

Here is my Jquery/Javascript code : 这是我的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";
    });

}); }）;

Answer 6

Well, this is a relatively simple piece of jquery. 好吧，这是一个相对简单的jQuery。 Here's how: 这是如何做：

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

This is just the code for the button color change. 这只是按钮颜色更改的代码。

按钮背景颜色变化

问题描述

6 个解决方案

解决方案1
1 2015-11-17 05:23:46

解决方案2
0 2015-11-17 04:51:19

解决方案3
0 2015-11-17 05:09:50

解决方案4
0 2015-11-17 05:29:16

解决方案5
0 2015-11-19 04:12:12

解决方案6
0

按钮背景颜色变化

问题描述

6 个解决方案

解决方案1 1 2015-11-17 05:23:46

解决方案2 0 2015-11-17 04:51:19

解决方案3 0 2015-11-17 05:09:50

解决方案4 0 2015-11-17 05:29:16

解决方案5 0 2015-11-19 04:12:12

解决方案6 0

解决方案1
1 2015-11-17 05:23:46

解决方案2
0 2015-11-17 04:51:19

解决方案3
0 2015-11-17 05:09:50

解决方案4
0 2015-11-17 05:29:16

解决方案5
0 2015-11-19 04:12:12

解决方案6
0