Question

我已经尝试了几天现在找到一种方法来改变我的按钮的颜色，当点击javascript或PHP。我已经有了一个带有CSS的按钮：#btnMenu。
这是按钮：

<a href="/?nav=home"><input id="btnMenu" type="button" value="Hjem"/></a>

按钮为：background-color: grey;
单击后，我希望按钮为：background-color: red;

我认为它无法在CSS中完成，但我可以更改PHP的背景吗？

Answer 1

jQuery很容易用来做这样的事情。 PHP（服务器端）不是为加载页面后对页面进行更改而设计的。

您可以尝试这样的事情：

$('#btnMenu').click(function(){
   $(this).css('background-color', 'red');
});

Answer 2

我不认为a和button是一个很好的组合。但是，您可以使用此代码更改按钮的背景颜色。

document.getElementById('btnMenu').onclick = function(){
 this.style.backgroundColor = "red";
}

Answer 3

document.getElementById('btnMenu').onclick = function(){
 this.style.backgroundColor = "red";
}

Answer 4

<input type="button" id="btnMenu" value="Hjem" style="color:white" onclick="setColor()"; />

 var count = 1;
function setColor() {
    var property = document.getElementById(btnMenu);
    if (count == 0) {
        property.style.backgroundColor = "#FFFFFF"
        count = 1;        
    }
    else {
        property.style.backgroundColor = "#7FFF00"
        count = 0;
    }
}

Answer 5

试试这个，

JavaScript的：

    var count = 1;
    function setColor() {
        var property = document.getElementById('btnMenu');
        if (count == 0) {
            property.style.backgroundColor = "#FFFFFF"
            count = 1;        
        }
        else {
            property.style.backgroundColor = "#7FFF00"
            count = 0;
        }
    }

HTML

<input id="btnMenu" type="button" value="Hjem" onclcik="setColor();"/>

Answer 6

试试这个

HTML

<a href="/?nav=home"><input id="btnMenu" type="button" value="Hjem"/></a>

的Javascript

document.getElementById('btnMenu').onclick = function(){
 this.className = 'blueColor';
}

CSS

.blueColor{
    background:blue;
}

http://jsfiddle.net/826fhe99/2/

Answer 7

当您使用a（锚点）按钮时，点击页面后会刷新，所以在这种情况下更改按钮的颜色你应该试试这个：

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<a href="/?nav=home"><input id="btnMenu" type="button" value="Hjem"/></a>

<script>
function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}



  $(document).ready(function(){

          var param = getParameterByName('nav');
          if(param == 'home'){
              $('#btnMenu').css("background-color", "red");
          }

})
</script>

单击时更改按钮颜色

7 个答案: