按鈕背景顏色變化

我在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

按鈕背景顏色變化

回答

相關問題