<!DOCTYPE html>
<html>
<head>
<style>
* {
font-family: Monaco, Arial, Verdana;
font-size: 12px;
padding: 0;
}
body {
margin: 0;
}
#box {
position: absolute;
top: 50px;
left: 50px;
width: 500px;
height: 400px;
background-color: green;
}
.notebook {
list-style: none;
}
.notebook li {
float: left;
}
.notebook .tab {
background-color:#f1f1f1;
color: #000;
border: #ccc 1px solid;
cursor: pointer;
padding: 2px 10px 2px 10px;
}
.notebook .tab-selected {
background-color: #ccc;
color: #000;
border: #ccc 1px solid;
font-weight: bold;
cursor: pointer;
padding: 2px 10px 2px 10px;
}
.notebook .content {
clear: both;
width: 99%;
height: 300px;
background-color: #ccc;
border: #ccc 1px solid;
}
</style>
<script type="text/javascript">
var Notebook = {
elementId: '',
tabIndex: 0,
tabs: new Array()
};
Notebook.setElementId = function(id) {
this.elementId = id;
for (var i = 0; i < document.getElementById(this.elementId).getElementsByTagName('li').length; i++) {
var tabElement = document.getElementById(this.elementId).getElementsByTagName('li')[i];
if (tabElement.className == 'content') {
continue;
}
tabElement.index = i;
var obj = this;
tabElement.onclick = function() {
obj.onTabClick(this);
};
this.tabs.push(tabElement);
}
this.onTabClick(this.tabs[this.tabIndex]);
};
Notebook.onTabClick = function(element) {
this.tabIndex = element.index;
for (var i = 0; i < this.tabs.length; i++) {
if (this.tabs[i].className == 'content') {
continue;
}
if (i == this.tabIndex) {
this.tabs[i].className = "tab-selected";
}
else {
this.tabs[i].className = "tab";
}
}
document.getElementById(this.elementId).getElementsByClassName('content')[0].innerHTML = \
element.getAttribute('content');
};
</script>
</head>
<body>
<div id="box">
<ul class="notebook" id="notebook">
<li class="tab" id="tab1" content="Testando 1 2 3">Tab 1</li>
<li class="tab" id="tab2" content="Testando 4 5 6">Tab 2</li>
<li class="tab" id="tab3" content="Testando 7 8 9">Tab 3</li>
<li class="content">xxx</li>
</ul>
</div>
</body>
</html>
<script type="text/javascript">
Notebook.setElementId('notebook');
</script>
Posts
No comments:
Post a Comment