JSFiddle - React, Tailwind, and code Playground

by catfood

HTML

<div data-bind="click: tabChange">
<a href="#tab1" data-bind="css: { active: tabCheck($element) }">tab1</a>
<a href="#tab2" data-bind="css: { active: tabCheck($element) }">tab2</a>
<a href="#tab3" data-bind="css: { active: tabCheck($element) }">tab3</a>
</div>
<div>
<div id="tab1" data-bind="visible:panelCheck($element)">CSS1</div>
<div id="tab2" data-bind="visible:panelCheck($element)">CSS2</div>
<div id="tab3" data-bind="visible:panelCheck($element)">CSS3</div>
</div>

CSS

a.active{
    font-weight:bold;
}

JavaScript

//ViewModelを定義
var tabPanelViewModel = function(){
    //Model作成
    this.selectTab = ko.observable("#tab1");
}
//Modelチェンジ
tabPanelViewModel.prototype.tabChange = function(o,e){
    if(e.target.tagName=="A"){
        this.selectTab(e.target.getAttribute("href"));
    }
}
//タブチェンジ
tabPanelViewModel.prototype.tabCheck = function(e){
    return this.selectTab()== e.getAttribute("href");
}
//パネルチェンジ
tabPanelViewModel.prototype.panelCheck = function(e){
    return this.selectTab()=="#"+e.getAttribute("id");
}
//bindingスタート
ko.applyBindings( new tabPanelViewModel() );