按鈕背景顏色變化
[英]Button Background Color change
問題描述
我在HEADER部分有4個按鈕（B1，B2，B3，B4），每個按鈕都重定向到同一選項卡中的不同頁面。
按鈕背景顏色為白色。
每當我單擊特定按鈕時，整個頁面都會重新加載並重定向到特定按鈕頁面。
注意：頁眉部分包含在所有4個按鈕頁面中。
現在我的要求是：
每當我單擊特定按鈕時，僅該特定按鈕的背景色應更改為另一種顏色（例如：紅色），其余部分僅顯示為白色。
例：如果我單擊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"> <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 個解決方案
解決方案1
1 2015-11-17 05:23:46
這聽起來像是您嘗試根據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">
<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
}
解決方案2
0 2015-11-17 04:51:19
最好的方法是使用AJAX 。 否則，如果您要重新加載整個頁面，則單擊的按鈕可能必須將其存儲到會話或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
0 2015-11-17 05:09:50
我認為，如果頁面重定向/刷新比使用純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);
});
解決方案4
0 2015-11-17 05:29:16
有許多方法可以實現這一目標，而最佳方法最終將取決於您的應用程序，個人品味和各種各樣的其他因素。 注意事項：
這是一種使用HTML localStorage將按鈕id存儲在如下所示的click事件上的方法。 然后，您可以無限期地在同一域中的任何位置的后續頁面加載/重新加載時獲取該值。
演示： 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>
解決方案5
0 2015-11-19 04:12:12
感謝您的建議和答案，但重點是，我不想單擊按鈕時使用腳本代碼，因為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";
});
}）;
解決方案6
0
好吧，這是一個相對簡單的jQuery。 這是如何做：
$('#*button id*').css('background-color', '#ff0000');
這只是按鈕顏色更改的代碼。
更改背景顏色的按鈕
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.