JSFiddle - React, Tailwind, and code Playground

by catfood

HTML

<button data-bind="click: tabChange.bind($data,0),css: { active: selectTab() == 0 }">button</button>
<button data-bind="click: tabChange.bind($data,1),css: { active: selectTab() == 1 }">button</button>
<button data-bind="click: tabChange.bind($data,2),css: { active: selectTab() == 2 }">button</button>
<div data-bind="visible:selectTab()==0">CSS1</div>
<div data-bind="visible:selectTab()==1">CSS2</div>
<div data-bind="visible:selectTab()==2">CSS3</div>

CSS

button.active{
    font-weight:bold;
}

JavaScript

//ViewModelを定義
    function TabplanelModel(){
        var self = this;
        self.selectTab = ko.observable(0);
        self.tabChange = function(n){
            self.selectTab(n);
        }
    }
    //bindingスタート
    ko.applyBindings( new TabplanelModel() );