A Pen by Minoru Hayakawa.

index.html

<div id="tab">
<ul class="ui-tab" role="tablist">
<li role="tab">
<a href="#tab1" data-bind="click: showBlock, css: { 'active': selected() == 'tab1' || init() == 1 }">Tab1</a>
</li>
<li role="tab">
<a href="#tab2" data-bind="click: showBlock, css: { 'active': selected() == 'tab2' }">Tab2</a>
</li>
<li role="tab">
<a href="#tab3" data-bind="click: showBlock, css: { 'active': selected() == 'tab3' }">Tab3</a>
</li>
</ul>

<div class="ui-tabpanel" role="tabpanel" data-bind="visible: selected() == 'tab1' || init() == 1">
<p>TabPanel1 Tab Panel1 Tab Panel1 Tab Panel1 Tab Panel1</p>
</div>

<div class="ui-tabpanel" role="tabpanel" data-bind="visible: selected() == 'tab2'">
<p>TabPanel2 Tab Panel2 Tab Panel2 Tab Panel2 Tab Panel2</p>
</div>

<div class="ui-tabpanel" role="tabpanel" data-bind="visible: selected() == 'tab3'">
<p>TabPanel3 Tab Panel3 Tab Panel3 Tab Panel3 Tab Panel3</p>
</div>

</div>

script.js

var TabViewModel = function(){
  var self = this;

  //Set href value of element
  self.selected = ko.observable(null);
  
  //initial set to show first tabpanel when loading page
  self.init = ko.observable(1);

  //Get href value og element
  self.getHref = function(){
    var target;
    var element = event.target.hash;
    target = element.substr(1);
    return target;
  };

  //Show Tabpanel
  self.showBlock = function(){
    var target = self.getHref();
    self.selected(target);
    self.init(2);
  };
 };

ko.applyBindings(new TabViewModel());

style.css

div, p, ul {
	margin: 0;
	padding: 0;
}

#tab {
	width: 400px;
}

.ui-tab {
	list-style: none;
	text-align: center;
}
.ui-tab li {
	display: inline-block;
	width: 100px;
	text-align: center;
	border-top: 1px solid #999;
	border-left: 1px solid #999;
	border-right: 1px solid #999;
	border-radius: 5px 5px 0 0;
}

.ui-tab li a {
	text-decoration: none;
	display: block;
	color: #000;
	padding: 6px 10px 5px;
}

.ui-tabpanel {
	border: 1px solid #999;
	min-height: 200px;
	padding: 10px;
}
.active {
	padding: 10px 10px 5px !important;
	border-bottom: 1px solid #fff;
	margin: 0 0 -1px;
}

Tabpanel-using-Knockout.js.markdown

Tabpanel using Knockout.js

This is Tabpanel using Knockout.js

A Pen by Minoru Hayakawa on CodePen.

License.