按钮背景颜色变化

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

按钮背景色是白色。

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

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

现在，我的要求是：

每当我点击特定的按钮，即特定的按钮回地面的颜色应该只改变为另一种颜色（比如ex：RED）其余showld只能是白色。 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>

来源

2015-11-17 PavanKumar GVVS

你可以在网址中使用'ajax'，'＃'等，这是纯粹的CSS所不可能的。 – Alex

为当前页面按钮添加一个特定的类。使用它你可以改变按钮的背景颜色 –

最好的办法是使用AJAX 。否则，如果你正在重新加载整个页面，点击的按钮，你可能需要将它存储到像会话或数据库（这不是一个好习惯），或通过像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'); 
     } 
    }); 
});

来源

2015-11-17 04:51:19

我认为，如果页面重定向/刷新不是U不能achive使用纯CSS nither你可以不用添加参数如其他评论中所描述的URL 但是，您可以尝试使用Cookie，我没有尝试过使用它，但是您可以使用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); 
});

来源

2015-11-17 05:09:50

这听起来像你想设置基于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 
}

来源

2015-11-17 05:23:46 sjm

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

下面是一个使用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>

来源

2015-11-17 05:29:16 billynoah

感谢您的建议和答案，但问题是，我不希望在点击按钮脚本代码，因为页面将在按钮的点击重新加载，因此无法忍住在这种情况下的底色。

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

这里是我的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"; 
    });

}）;

来源

2015-11-19 04:12:12

那么，这是一个相对简单的jQuery的一块。方法如下：

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

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

来源

2016-02-29 20:02:33 redwolf10105

按钮背景颜色变化

回答

相关问题