Greetings,
This page works as intended in Firefox 1.5, and for the most part in IE, the only problem being that when a tab is clicked, it does not take on the 'tabActive' CSS class. Can anyone point out what I'm missing?
<html>
<head>
<style>
#tabs a, #tabs a:link, #tabs a:visited {
text-decoration: none; COLOR: #000099; BACKGROUND: white; BORDER-RIGHT: #000099 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000099 1px solid; PADDING-LEFT: 2px; MARGIN: 0px; FONT: bold 11px verdana; BORDER-LEFT: #000099 1px solid; CURSOR: hand; BORDER-BOTTOM: #000099 1px solid; TEXT-ALIGN: center;
}
#tabs a:hover, #tabs a.tabActive:hover {
COLOR: white; BACKGROUND: #000099;
}
#tabs a.tabActive {
COLOR: #99ccff; BACKGROUND: #000099;
}
#tabCnt1, #tabCnt2, #tabCnt3 {display: block;}
</style>
<script language="javascript">
function getbyID(obj) { // lazy getElementById();
return document.getElementById(ob
j);
}
function last(str) { // return last char from a string
return str.substr(str.length-1);
}
function set_div(idTab,bState) {
return getbyID(idTab).style.displ
ay = bState ? 'block' : 'none';
}
function set_tab(idTab,bState) {
return getbyID(idTab).className = bState ? 'tabActive' : 'tab';
}
function set_all(bState) {
var x = getbyID('tabs').getElement
sByTagName
('a');
for (i=0;i<=x.length-2;i++) {
set_div('tabCnt'+(i+1),bSt
ate);
set_tab(x[i].id,false);
}
set_tab('allTabs',bState);
return true;
}
function select_tab(idTab) {
if (idTab == 'allTabs') {
set_all(true);
} else {
set_all(false);
set_div('tabCnt'+last(idTa
b),true);
set_tab(idTab,true);
}
}
</script>
</head>
<body>
<div class="vtable" id="tabs" unselectable="on">
<a class="tab" id="tabNum1" unselectable="on" onClick="javascript:select
_tab(this.
id);" href="#">General</a>
<a class="tab" id="tabNum2" unselectable="on" onClick="javascript:select
_tab(this.
id);" href="#">Hardware</a>
<a class="tab" id="tabNum3" unselectable="on" onClick="javascript:select
_tab(this.
id);" href="#">Software</a>
<a class="tab" id="allTabs" unselectable="on" onClick="javascript:select
_tab(this.
id);" href="#">All Tabs</a>
</div>
<div id="tabCnt1" class="asdf">General</div>
<div id="tabCnt2" class="asdf">Hardware</div
>
<div id="tabCnt3" class="asdf">Software</div
>
</body>
</html>
Start Free Trial
