How can I change the bg-color with knockout.js css-binding when the element is clicked?

Question

https://www.w3schools.com/code/tryit.asp?filename=FG1ZE0NJ4ZX7

So, I made a progress breadcrumb, but I want to make the background color of each progress change when it's clicked by using knockout.js css-binding.

How can I apply the

.selected {
    color: white;
    background: #369F00;
}

style when the button is clicked and change it back to its original color when a different button is clicked by using knockout.js css-binding?

Thanks in advance

Answer 1

You can try something like this. It works well if you need complete control over the style from Javascript, Otherwise I'd suggest placing those styles into a class, and using the css binding instead, to apply a class when an observable boolean is true.

http://knockoutjs.com/documentation/style-binding.html

 var ViewModel = function() { this.styling = ko.observable({ 'color': 'black', 'background': 'white' }); this.changeStyles = function(){ this.styling({ 'color': 'white', 'background': '#369F00' }); }; }; ko.applyBindings(new ViewModel()); 

 body { font-family: arial; font-size: 14px; } .liveExample { padding: 1em; border: 1px solid #CCC; max-width: 655px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <div class='liveExample' data-bind='click: changeStyles, style:styling'> Some Content </div> 

Answer 2

This is how to solve the problem using the css data-binding, keeping things nice and classful.

http://knockoutjs.com/documentation/css-binding.html

 var ViewModel = function() { this.isSelected = ko.observable(false); this.changeStyles = function(){ this.isSelected(true); } }; ko.applyBindings(new ViewModel()); 

 body { font-family: arial; font-size: 14px; } .liveExample { padding: 1em; border: 1px solid #CCC; max-width: 655px; } .selected {color: white; background: #369F00} 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <div class='liveExample' data-bind='click: changeStyles, css:{selected:isSelected}'> Some Content </div>