With the combination of div tag, style:display attribute of div tag and java script one can make a simple tab view which look something like as follow:
Following is the js code for that:
function tabChange(i) {
for ( var j = 1; j <= 3; j++) {
if (i == j) {
document.getElementById("Page" + j).style.display = "block";
document.getElementById("Tab" + j).className = "tabSelect";
} else {
document.getElementById("Page" + j).style.display = "none";
document.getElementById("Tab" + j).className = "tab";
}
}
}
The html code:-
<div>
<a id="Tab1" href="javascript:tabChange(1)">Tab 1</a><a id="Tab2" href="javascript:tabChange(2)">Tab 2</a><a id="Tab3" href="javascript:tabChange(3)">Tab 3</a>
</div>
<div id="Page1" class="box">
First tab content.
</div>
<div id="Page2" style="display: none;">
Second tab content.
</div>
<div id="Page3" style="display: none;">
Third tab content.
</div>
And the css used in this example:
.tab {
width: 105px;
padding: 5px;
color: #065fba;
background: #f4f5f8;
border: #e2e2e2 1px solid;
}
.tab:hover {
background: #065fba;
color: #f4f5f8;
}
.tabSelect {
width: 800px;
padding: 5px;
background: #065fba;
color: #f4f5f8;
border: #e2e2e2 1px solid;
}
.box {
width: 600px;
margin-top:5;
padding: 5px;
background: #ffffff;
border: #065fba 2px solid;
height:600px;
}
a {
color: #000000;
text-decoration: none;
}


Thanks you so much Harry Helped alot