如何在菜單欄中特別設置默認選項卡菜單選項卡

我在此代碼中有一些查詢。這是Bar Java Script中的菜單，它有很多選項卡。當我運行此代碼時，它會自動單擊第二個選項卡而不是第一個選項卡。如何在菜單欄中特別設置默認選項卡菜單選項卡

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 
    } 
    }

HTML代碼：

<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代碼：

#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;}

對於樣品請參見下面的鏈接。點擊此處查看它http://www.javascriptkit.com/script/script2/tabset/index.shtml

來源

2013-02-12 coolprarun

添加rel屬性示例您<a>標籤首頁

希望這有助於！

修訂
在你的HTML代碼更新下面的通話

dolphintabs.init("dolphinnav", 0)

來源

2013-02-12 10:56:00 asifsid88

我已經試過這個人在這個兩個標籤的被點擊和活躍一個是第二個只有[這是默認選項只點擊] – coolprarun 2013-02-12 10:59:42

這就是完整的JavaScript代碼。我已經張貼above.Please檢查它... – coolprarun 2013-02-12 11:05:29

請參閱下面的圖片兄弟..你將瞭解的情況。 http://img521.imageshack.us/img521/9139/errorde.jpg – coolprarun 2013-02-12 11:08:10

如何在菜單欄中特別設置默認選項卡菜單選項卡

回答

相關問題