Question

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

按钮背景颜色为白色。

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

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

现在我的要求是：

每当我点击特定按钮时，该特定按钮背景颜色应仅变为另一种颜色（例如ex：RED），其余showld仅为白色。

EX：如果我点击B1按钮，页面应该重新加载，那么B1按钮的背景颜色应该改为红色休息应该是白色。

如何在Jquery或Java脚本或CSS中执行此操作？

PLS。帮帮我。

.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

听起来你试图根据网址在按钮上设置一个活动状态，使用本文稍作修改来使用按钮而不是链接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
}

Answer 2

最佳方法是使用 AJAX 。否则，如果您正在重新加载整个页面，则可能需要将单击的按钮存储在某个地方（如会话或数据库）（这不是一个好习惯），或者通过像page.php?id=b1这样的网址。

<强> 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');
      }
   });
});

Answer 3

我认为如果页面重定向/刷新比U不能使用纯css，您可以在不添加URL的参数的情况下执行此操作，如其他注释中所述但你可以尝试使用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);
});

Answer 4

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

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

DEMO：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

感谢您的建议和答案，但重点是，我不希望点击按钮时的脚本代码，因为Page会在点击按钮时重新加载，因此无法在该事件中保留底色。

我得到了解决方案，它有点旧，但它对我来说确切。但我需要做硬编码。如果提供任何其他解决方案将不胜感激。

这是我的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

嗯，这是一个相对简单的jquery。方法如下：

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

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

按钮背景颜色变化

6 个答案: