Question

 <link type="text/css" href=" https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet">
 <div class="w3-bar w3-red">
        <a class="w3-bar-item w3-button w3-hover-blue">Button</a>
 </div>

我想要点击它，它会改变自己的颜色。如果再次单击它，它将更改为原始颜色。（见悬停）我不知道怎么做，因为它是一个类，颜色在栏中。

Answer 1

你可以试试这个：

var IsCustomBG=false;
$(".w3-button").click(function(){
   if(IsCustomBG==false){
      $(this).css("background-color","red");
      IsCustomBG=true;
   }
   else{
      $(this).css("background-color","");
      IsCustomBG=false;
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link type="text/css" href=" https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet">
 <div class="w3-bar w3-red">
        <a class="w3-bar-item w3-button w3-hover-blue">Button</a>
 </div>

Answer 2

您可以点击按钮添加/删除课程。

＆＃13;

$(".w3-bar-item").on("click",function(){

  if($(this).hasClass('color')){
    $(this).removeClass('color');
  }
  else{
    $(this).addClass('color');
  }
});

＆＃13;

.color{
color:green !important;
background-color:yellow !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link type="text/css" href=" https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet">
 <div class="w3-bar w3-red">
        <a class="w3-bar-item w3-button w3-hover-blue">Button</a>
 </div>

＆＃13;

Answer 3

这样做，在链接中添加一个ID，最好不要使用像这样的CSS框架。

var theLink = document.querySelector("#fkbtn");
theLink.addEventListener("click", function() {

this.className =（＆＃39;点击＆＃39;）; }）;

在Css中，你需要这个：

.clicked{ background:black; !important;}

使用框架，事情变得混乱，你需要！重要来覆盖东西，只是一个巨大的混乱，上面删除所有其他类，因此，尺寸，但你的链接颜色将会改变。

Answer 4

＆＃13;

#check{
  display: none;
}

label[for=check]{
  padding: 5px 10px;
  background-color: skyblue;
  cursor: pointer;
  color: white;
}

#check:checked + label{
  background-color: pink;
}

＆＃13;

<input type="checkbox" id="check" />
<label for="check">button</label>

＆＃13;

如果您想在点击时更改按钮的颜色，我认为您应该使用复选框技巧。但这不是正确的答案。这只是一招。

如何更改w3.css按钮自己的颜色？

4 个答案: