Tab container is used for storing different item in each tab. So tab container is the collection of Tabs. In this example it contains five tabs.
How to create TabContainer in JavaScript
Step1: write this code and save it as html form
<body>
<form id="form1">
<table>
<tr align="left">
<td>
<input type="button" class="button1" id="btnTab1" value="Tab1" onclick="show(this);" />
</td>
<td>
<input type="button" class="button1" id="btnTab2" value="Tab2" onclick="show(this);" />
</td>
<td>
<input type="button" class="button1" id="btnTab3" value="Tab3" onclick="show(this)" />
</td>
<td>
<input type="button" class="button1" id="btnTab4" value="Tab4" onclick="show(this)" />
</td>
<td>
<input type="button" class="button1" id="btnTab5" value="Tab5" onclick="show(this)" />
</td>
</tr>
</table>
<table style="font-size: 16px;" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<div id="div1" class="divFirst">
</div>
<div id="div2" class="divHide">
</div>
<div id="div3" class="divHide">
</div>
<div id="div4" class="divHide">
</div>
<div id="div5" class="divHide">
</div>
</td>
</tr>
</table>
</form>
</body>
Step2: Create javascript file and add this link in head section in html
page.and write this code
var a = new Array("div1", "div2", "div3", "div4", "div5");
var b = new Array("btnTab1", "btnTab2", "btnTab3", "btnTab4", "btnTab5");
function show(e) {
var i = 0;
var j = 1;
for (var t = 0; t < b.length; t++) {
if (b[t] == e.id) {
i = t;
if (i > 0) {
j = 0;
}
else {
j = i + 1;
}
break;
}
}
e.setAttribute("class", "btnActive");
for (var k = 0; k < b.length; k++) {
if (k == i && (document.getElementById(a[k]) != null)) {
document.getElementById(a[k]).style.display = "block";
if (i == j)
j = i + 1;
}
else {
if (document.getElementById(a[k]) != null) {
document.getElementById(a[j]).style.display = "none";
document.getElementById(b[j]).setAttribute("class", "btnInactive");
j = j + 1;
}
}
}
}
window.onload = function () {
document.getElementById(b[0]).setAttribute("class", "btnActive");
}
Step3: Create a css file and add in head section of html page
.button1
{
border: solid 1px silver;
color: #11518F;
height: 30px;
}
.btnActive
{
border: solid 1px silver;
color: #11518F;
height: 33px;
z-index: 2;
background-color: White;
border-bottom-color: White;
}
.btnInactive
{
border: solid 1px silver;
color: #11518F;
height: 30px;
z-index: 0;
border-bottom-color: Silver;
}
.divHide
{
z-index: 0;
display: none;
border: 1px solid silver;
margin-top: -5px;
}
.divFirst
{
z-index: 1;
display: block;
border: 1px solid silver;
margin-top: -5px;
}
Note: We simply extend the tab by adding input button similar to add button and one div section (area of particular tab section).
Leave a Comment
2 Comments