Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
A Pen by Minoru Hayakawa.
<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 role="tab">
<a href="#tab2" data-bind="click: showBlock, css: { 'active': selected() == 'tab2' }">Tab2</a>
<li role="tab">
<a href="#tab3" data-bind="click: showBlock, css: { 'active': selected() == 'tab3' }">Tab3</a>
<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 class="ui-tabpanel" role="tabpanel" data-bind="visible: selected() == 'tab2'">
<p>TabPanel2 Tab Panel2 Tab Panel2 Tab Panel2 Tab Panel2</p>
<div class="ui-tabpanel" role="tabpanel" data-bind="visible: selected() == 'tab3'">
<p>TabPanel3 Tab Panel3 Tab Panel3 Tab Panel3 Tab Panel3</p>
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 =;
target = element.substr(1);
return target;
//Show Tabpanel
self.showBlock = function(){
var target = self.getHref();
ko.applyBindings(new TabViewModel());
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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment