I needed to create 'tab like' features for a site I am building.. I searched Google high and low for a pre-made script but they were all to complex for such a simple task, so I made my own with the help of snippets from others.
Maybe you'll find it useful
, tested in Firefox v1/2, IE v6/7, Opera v9. Seems to work ok. Requires Javascript.
PHP Code:
<html>
<head>
<title>CSS Tabs</title>
<script type="text/javascript">
<!--
function css_tabs(divID) {
var tab="";
var layers=new Array()
layers[0]="tab1"
layers[1]="tab2"
layers[2]="tab3"
for (x in layers) {
layer=layers[x];
tab="tab_" + layer;
if(layers[x]==divID) {
document.getElementById(layer).style.display = "block";
document.getElementById(tab).className = "active";
} else {
document.getElementById(layer).style.display = "none";
document.getElementById(tab).className = "";
}
}
}
-->
</script>
<style type="text/css">
<!--
#tabs {
height: 23px;
border-bottom:1px solid #C6C6C6;
margin: 0;
font-size: 12pt;
font-family:Verdana;
font-weight: bold;
}
#tabs ul {
margin: 0;
padding: 0;
}
#tabs li {
list-style-type: none;
display: inline;
margin: 0;
padding: 0;
}
#tabs a:link, #tabs a:visited {
float: left;
background: #F3F3F3;
line-height: 18px;
padding: 2px 10px 2px 10px;
margin-right: 5px;
border: 1px solid #C6C6C6;
border-bottom:0px;
color: #8B8B8B;
text-decoration: none;
}
#tabs a:hover, #tabs a:link.active, #tabs a:visited.active {
background: #FFFFFF;
color: #000000;
text-decoration: none;
}
-->
</style>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="javascript:void(0);" onclick="css_tabs('tab1');" id="tab_tab1" class="active">Tab 1</a></li>
<li><a href="javascript:void(0);" onclick="css_tabs('tab2');" id="tab_tab2" class="">Tab 2</a></li>
<li><a href="javascript:void(0);" onclick="css_tabs('tab3');" id="tab_tab3" class="">Tab 3</a></li>
</ul>
</div>
<div id="tab1" style="display:block">
This is some text in tab #1
</div>
<div id="tab2" style="display:none">
This is some text in tab #2
</div>
<div id="tab3" style="display:none">
This is some text in tab #3
</div>
</body>
</html>
Download:
04-05-2007, 04:26 AM
Similar Threads
Linear Mode
