I'm encountering some issues with this code. Specifically, the menu bar JavaScript is automatically clicking on the Second TAB instead of the First TAB when run.
JS CODE.
var dolphintabs = {
subcontainers: [],
last_accessed_tab: null,
revealsubmenu: function(curtabref) {
this.hideallsubs();
if (this.last_accessed_tab != null)
this.last_accessed_tab.className = "";
if (curtabref.getAttribute("rel"))
document.getElementById(curtabref.getAttribute("rel")).style.display = "block";
curtabref.className = "current";
this.last_accessed_tab = curtabref;
},
hideallsubs: function() {
for (var i = 0; i < this.subcontainers.length; i++)
document.getElementById(this.subcontainers[i]).style.display = "none";
},
init: function(menuId, selectedIndex) {
var tabItems = document.getElementById(menuId).getElementsByTagName("a");
for (var i = 0; i < tabItems.length; i++) {
if (tabItems[i].getAttribute("rel"))
this.subcontainers[this.subcontainers.length] = tabItems[i].getAttribute("rel");
if (i == selectedIndex) {
tabItems[i].className = "current";
this.revealsubmenu(tabItems[i]);
}
tabItems[i].onclick = function () {
dolphintabs.revealsubmenu(this);
}
}
}
}
HTML Code :
<head>
<title>Custom Dolphin Tabs Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="dolphin.js">
</script>
</head>
<body>
<div id="dolphincontainer">
...
CSS Code :
#dolphincontainer { ... }
...
For a sample, please visit the following link: