I have some queries in this code. This is the menu bar JavaScript in this it has many tab. When I run this code it automatically click in Second TAB instead of First TAB. JAVASCRIPT CODE. HTML Code : CSS Code : For Sample Please See the below Link. Click Here to View the Sample of it http://www.javascriptkit.com/script/script2/tabset/index.shtml Answer Add

How to Set Default TAB in particular Menu Tab in Menu Bar

I have some queries in this code. This is the menu bar JavaScript in this it has many tab. When I run this code it automatically click in Second TAB instead of First TAB.

JAVASCRIPT 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")) //If there's a sub menu defined for this tab     item, show it
    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") //store id of     submenu div of tab menu item
    if (i==selectedIndex){ //if this tab item should be selected by default
    tabItems[i].className="current"
    this.revealsubmenu(tabItems[i])
        }
    tabItems[i].onclick=function(){
    dolphintabs.revealsubmenu(this)
    }
    } //END FOR LOOP
    }
    }

JavaScript
​x
 
   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")) //If there's a sub menu defined for this tab     item, show it
    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") //store id of     submenu div of tab menu item
    if (i==selectedIndex){ //if this tab item should be selected by default
    tabItems[i].className="current"
    this.revealsubmenu(tabItems[i])
        }
    tabItems[i].onclick=function(){
    dolphintabs.revealsubmenu(this)
    }
    } //END FOR LOOP
    }
    }
​

HTML Code :

<head>
<title>Cut & Paste 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">
<div id="dolphinnav">
<ul>
<li><a href="http://www.javascriptkit.com"><span>Home</span></a></li>
<li><a href="http://www.javascriptkit.com" rel="joey"><span>Joey</span></a></li>
<li><a href="http://www.javascriptkit.com" rel="suzy"><span>Suzy</span></a></li>
<li><a href="http://www.javascriptkit.com" rel="george"><span >George</span></a></li>
<li><a href="http://www.javascriptkit.com"><span>Contact Us</span></a></li>
</ul>
</div>
<div id="dolphin_inner">
<div id="joey" class="innercontent">
Joey's statue of a white dog was originally given to Jennifer Aniston as a good luck present from her best friend.
</div>

<div id="suzy" class="innercontent">
During this period, then-locally famous Suzy Waud anchored evening broadcasting.
</div>

<div id="george" class="innercontent">
George Louis Costanza is a fictional character on the United States based television sitcom Seinfeld (1989â1998).
</div>

<!-- End Sub Menus container -->
</div>

</div>

<script type="text/javascript">

</script>
    </body>
    </html>

JavaScript
 
<head>
<title>Cut & Paste 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">
<div id="dolphinnav">
<ul>
<li><a href="http://www.javascriptkit.com"><span>Home</span></a></li>
<li><a href="http://www.javascriptkit.com" rel="joey"><span>Joey</span></a></li>
<li><a href="http://www.javascriptkit.com" rel="suzy"><span>Suzy</span></a></li>
<li><a href="http://www.javascriptkit.com" rel="george"><span >George</span></a></li>
<li><a href="http://www.javascriptkit.com"><span>Contact Us</span></a></li>
</ul>
</div>
<div id="dolphin_inner">
<div id="joey" class="innercontent">
Joey's statue of a white dog was originally given to Jennifer Aniston as a good luck present from her best friend.
</div>
​
<div id="suzy" class="innercontent">
During this period, then-locally famous Suzy Waud anchored evening broadcasting.
</div>
​
<div id="george" class="innercontent">
George Louis Costanza is a fictional character on the United States based television sitcom Seinfeld (1989â••1998).
</div>
​
<!-- End Sub Menus container -->
</div>
​
</div>
​
<script type="text/javascript">
​
</script>
    </body>
    </html>
​

CSS Code :

#dolphincontainer{position:relative;border-bottom: 2px solid navy;     color:#E0E0E0;background:#143D55;
width:100%;font-family:Helvetica,Arial,Verdana,sans-serif;}
#dolphinnav{position:relative;height:33px;font-size:12px;text-transform:uppercase;font-           weight:bold;background:#fff url(images/dolphin_bg.gif) repeat-x bottom left;padding:0 0 0 20px;}
#dolphinnav ul{margin:0;padding:0;list-style-type:none;width:auto;float:left;}
#dolphinnav ul li{display:block;float:left;margin:0 1px;}
#dolphinnav ul li a{display:block;float:left;color:#EAF3F8;text- decoration:none;padding:0 0 0 20px;height:33px;}
#dolphinnav ul li a span{padding:12px 20px 0 0;height:21px;float:left;}
#dolphinnav ul li a:hover{color:#fff;background:transparent url(images/dolphin_bg-OVER.gif) repeat-x bottom left;}
#dolphinnav ul li a:hover span{display:block;width:auto;cursor:pointer;}
#dolphinnav ul li a.current,#dolphinnav ul li a.current:hover{color:#fff;background:#1D6893 url(images/dolphin_left-ON.gif) no-repeat top left;line-height:275%;}
#dolphinnav ul li a.current span{display:block;padding:0 20px 0 0;width:auto;background:#1D6893 url(images/dolphin_right-ON.gif) no-repeat top right;height:33px;}

#dolphin_inner{color: white; padding: 5px; font-size: 80%; height: 1em}

#dolphin_inner a:link, #dolphin_inner a:visited, #dolphin_inner a:active{color: white}
#dolphin_inner a:hover{color: yellow}

.innercontent{display: none;}

JavaScript
 
#dolphincontainer{position:relative;border-bottom: 2px solid navy;     color:#E0E0E0;background:#143D55;
width:100%;font-family:Helvetica,Arial,Verdana,sans-serif;}
#dolphinnav{position:relative;height:33px;font-size:12px;text-transform:uppercase;font-           weight:bold;background:#fff url(images/dolphin_bg.gif) repeat-x bottom left;padding:0 0 0 20px;}
#dolphinnav ul{margin:0;padding:0;list-style-type:none;width:auto;float:left;}
#dolphinnav ul li{display:block;float:left;margin:0 1px;}
#dolphinnav ul li a{display:block;float:left;color:#EAF3F8;text- decoration:none;padding:0 0 0 20px;height:33px;}
#dolphinnav ul li a span{padding:12px 20px 0 0;height:21px;float:left;}
#dolphinnav ul li a:hover{color:#fff;background:transparent url(images/dolphin_bg-OVER.gif) repeat-x bottom left;}
#dolphinnav ul li a:hover span{display:block;width:auto;cursor:pointer;}
#dolphinnav ul li a.current,#dolphinnav ul li a.current:hover{color:#fff;background:#1D6893 url(images/dolphin_left-ON.gif) no-repeat top left;line-height:275%;}
#dolphinnav ul li a.current span{display:block;padding:0 20px 0 0;width:auto;background:#1D6893 url(images/dolphin_right-ON.gif) no-repeat top right;height:33px;}
​
#dolphin_inner{color: white; padding: 5px; font-size: 80%; height: 1em}
​
#dolphin_inner a:link, #dolphin_inner a:visited, #dolphin_inner a:active{color: white}
#dolphin_inner a:hover{color: yellow}
​
.innercontent{display: none;}
​

For Sample Please See the below Link. Click Here to View the Sample of it http://www.javascriptkit.com/script/script2/tabset/index.shtml

Answer

Add rel attribute to your <a> tag Home

Hope this helps!

UPDATED
In your HTML code update the below call

dolphintabs.init("dolphinnav", 0)

JavaScript
 
dolphintabs.init("dolphinnav", 0)
​

Advertisement

Answer