Wie kann man die Farbe der w3.css-Taste ändern?

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>

Ich möchte, dass machen, wenn Sie darauf klicken, es seine eigene Farbe ändert. Und wenn Sie erneut darauf klicken, ändert sich die ursprüngliche Farbe. (Siehe den Hover) Ich weiß nicht wie es geht, weil es eine Klasse ist und die Farbe in der Leiste ist.

Answer 1

Sie können dies versuchen:

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

Sie können Klasse auf Schaltfläche anklickt hinzufügen/entfernen.

$(".w3-bar-item").on("click",function(){ 
 

 
    if($(this).hasClass('color')){ 
 
    $(this).removeClass('color'); 
 
    } 
 
    else{ 
 
    $(this).addClass('color'); 
 
    } 
 
});

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

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

Answer 3

dies tun, eine ID zu dem Link hinzufügen, wäre am besten, gar nicht wie diese CSS-Frameworks zu verwenden.

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

this.className = ('geklickt'); });

Im Css, müssen Sie dies:

.clicked{ background:black; !important;} 

Mit Frameworks, die Dinge chaotisch erhalten, müssen Sie die wichtigen Sachen außer Kraft zu setzen, nur ein großes Durcheinander, entfernt die vor allen anderen Klassen und damit das! Dimensionen, aber Ihre Linkfarbe wird sich ändern.

Answer 4

#check{ 
 
    display: none; 
 
} 
 

 
label[for=check]{ 
 
    padding: 5px 10px; 
 
    background-color: skyblue; 
 
    cursor: pointer; 
 
    color: white; 
 
} 
 

 
#check:checked + label{ 
 
    background-color: pink; 
 
}

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

Wenn Sie Taste die Farbe ändern, wenn Sie auf, ich glaube, Sie Checkbox Trick verwenden sollten. aber es ist nicht die richtige Antwort. Es ist nur ein Trick.

Answer 5

Speichern Sie den ursprünglichen Wert der "Schaltfläche" und wechseln Sie zwischen diesem und einer benutzerdefinierten Farbe beim Klicken.

var button = document.getElementsByTagName('a')[0]; 
 
var color = button.style.backgroundColor; 
 
button.addEventListener('click', function(){ 
 
    this.style.backgroundColor = this.style.backgroundColor === color ? '#BADA55' : color; 
 
});

<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 6

Sie können einfach eine Klasse erstellen und die Klasse auf Klick wechseln. Dieser Ansatz ist nützlich, wenn Sie in Zukunft weitere css-Eigenschaften für denselben Vorgang hinzufügen möchten.

$(".w3-button").click(function(){ 
 
    $(this).toggleClass('redCls'); 
 
});

.redCls{ 
 
    background-color:red !important; 
 
}

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