Button Background Color change
Question
I have 4 buttons(B1,B2,B3,B4) in HEADER section,Each button redirects to different page in the same tab.
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.
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.
How to do this in Jquery or Java script or CSS?
Pls. assist me.
.HeaderButtons { width: 15%; background-color: WHITE; }
<div id="Header"> <input type="button" name="B1" id="B1" value="B1" class="HeaderButtons"> <input type="button" name="B2" id="B2" value="B2" class="HeaderButtons"> <input type="button" name="B3" id="B3" value="B3" class="HeaderButtons"> <input type="button" name="B4" id="B4" value="B4" class="HeaderButtons"> </div>
6 answers
solution1
1 2015-11-17 05:23:46
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/
<div id="Header">
<input data-href="/" type="button" name="B1" id="B1" value="B1" class="HeaderButtons">
<input data-href="/page1/" type="button" name="B2" id="B2" value="B2" class="HeaderButtons">
<input data-href="/page2/" type="button" name="B3" id="B3" value="B3" class="HeaderButtons">
<input data-href="/page3/" type="button" name="B4" id="B4" value="B4" class="HeaderButtons">
</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
}
solution2
0 2015-11-17 04:51:19
Best approach is to use 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 .
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');
}
});
});
solution3
0 2015-11-17 05:09:50
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 .
$('.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);
});
solution4
0 2015-11-17 05:29:16
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:
Here's a method using HTML localStorage to store the button id on a click event like below. 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
<!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">
<input type="button" name="B2" id="B2" value="B2" class="HeaderButtons" onclick="setButton(this.id); window.location.href=window.location.href">
<input type="button" name="B3" id="B3" value="B3" class="HeaderButtons" onclick="setButton(this.id); window.location.href=window.location.href">
<input type="button" name="B4" id="B4" value="B4" class="HeaderButtons" onclick="setButton(this.id); window.location.href=window.location.href">
</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>
solution5
0 2015-11-19 04:12:12
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.
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 :
$(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";
});
});
solution6
0
Well, this is a relatively simple piece of jquery. Here's how:
$('#*button id*').css('background-color', '#ff0000');
This is just the code for the button color change.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.