Tab标签-蒲公英云

Tab标签

实现类似IE7的Tab标签风格.效果如下:

代码

< html xmlns = “ http://www.w3.org/1999/xhtml “ >
< head id = “ Head1 “ runat = “ server “ >
< title > Untitled Page </ title >

 < script type = " text/javascript " >   
    function GetTabContent(ulObj,content0,liObj,contentObj)  
    \{  
        var menu = document.getElementById(ulObj).getElementsByTagName( ' li ' );  
        var list = document.getElementById(content0).getElementsByTagName( ' div ' );  
         for (var i = 0 ;i < menu.length;i \++ )  
        \{             
            document.getElementById( ' li ' \+ i).className = " hover " ;  
            list\[i\].style.display  = " none " ;  
        \}  
         document.getElementById(liObj).className  = " here " ;  
         document.getElementById(contentObj).style.display  = " block " ;  
    \}  
 </ script >

</ head >
< body >
< form id = “ form1 “ runat = “ server “ >
< div id = “ example “ >
< h3 id = “ example_title “ >
TAB & nbsp;样式Demo </ h3 >
< div id = “ example_main “ >

< style type = “ text/css “ >
#tabnav
{
background: #d5d5d5;
border - bottom: 1px solid # 333 ;
padding - bottom: 3px;
margin: 0 auto;
}
#tabnav ul
{
padding: 15px 0px 5px 0px;
margin: 5px 0px 5px 0px;
list - style: none;
background: #f1f1f1;
border - bottom: 1px solid # 999 ;
line - height: 120 % ;
}
#tabnav ul li
{
display: inline;
margin - left: 10px;
}
#tabnav ul li a
{
background: #fff;
padding: 5px 10px 5px 10px;
border: 1px solid # 999 ;
line - height: normal;
}
#tabnav ul li a:hover
{
background: #ccc;
color: # 666 ;
}
#tabnav ul li a.here
{
background: #d5d5d5;
padding: 5px 10px 5px 10px;
border - top: 1px solid # 999 ;
border - left: 1px solid # 999 ;
border - right: 1px solid # 999 ;
border - bottom: 1px solid #d5d5d5;
color: #fff;
font - weight: bold;
}
#tabnav ul li a.here:hover
{
background: #d5d5d5;
}
</ style >
< div id = “ tabnav “ >
< ul id = “ menu0 “ >
< li >< a id = “ li0 “ class = “ here “ href = “ # “ onclick = ‘ GetTabContent(“menu0”,”content0”,”li0”,”divContent0”) ‘ >
帝王槌 </ a ></ li >
< li >< a id = “ li1 “ href = “ # “ onclick = ‘ GetTabContent(“menu0”,”content0”,”li1”,”divContent1”) ‘ >
玉女枪法 </ a ></ li >
< li >< a id = “ li2 “ href = “ # “ onclick = ‘ GetTabContent(“menu0”,”content0”,”li2”,”divContent2”) ‘ >
黑沙刚体 </ a ></ li >
< li >< a id = “ li3 “ href = “ # “ onclick = ‘ GetTabContent(“menu0”,”content0”,”li3”,”divContent3”) ‘ >
不羁浪人枪 </ a ></ li >
</ ul >
</ div >
< div id = “ content0 “ >
< div id = “ divContent0 “ >
< h2 >
帝王槌 </ h2 >
< br />
立剑赏月意惆怅,袖饰刀,衣披霜,傲视雾丸,徒手战扶桑. < br />
问津终寻帝王陵,黑影没,尸满岗,惟见逆鲮露寒光.
< br />
须发苍,气轩昂,三尺银狼,破风动八方.
< br />
依身紧握噬魂枪,饮虎血,豪万丈.惟有千年我故乡 !
</ div >
< div id = “ divContent1 “ >
< h2 >
玉女枪法 </ h2 >
< br />
曾经有个梦想：驰骋江湖，快意恩仇。 < br />
曾经有份愿望：千里追凶，十步溅血。 < br />
曾经有腔豪情：奇功盖世，名冠武林。 < br />
曾经有种期盼：烛影摇红，衣袖添香。
</ div >
< div id = “ divContent2 “ >
< h2 >
黑沙刚体 </ h2 >
< br />
赵客缦胡缨，吴钩霜雪明。银鞍照白马，飒沓如流星。
< br />
十步杀一人，千里不留行。事了拂衣去，深藏身与名。 < br />
闲过信陵饮，脱剑膝前横。将炙啖朱亥，持觞劝侯嬴。
< br />
三杯吐然诺，五岳倒为轻。眼花耳热后，意气素霓生。
< br />
救赵挥金锤，邯郸先震惊。千秋二壮士，烜赫大梁城。 < br />
纵死侠骨香，不惭世上英。谁能书阁下，白首太玄经。
</ div >
< div id = “ divContent3 “ >
< h2 >
不羁浪人枪 </ h2 >
< br />
素手相牵，斜辉入眼帘，一轮逍遥自在间，醉了山水闲。 < br />
沙漠绿水涟，鱼游浅底，明眸一水天。 < br />
爱在村友相谈，开心点点，笑语连连，率性夜无眠。 < br />
月在西边，风乱星寒，辗转醇香旧事，蛾儿曼舞灯前。
</ div >
</ div >
</ form >
< script type = “ text/javascript “ >
GetTabContent( “ menu0 “ , “ content0 “ , “ li0 “ , “ divContent0 “ );
</ script >
</ body >
</ html >