Tab标签

谁借莪１个温暖的怀抱￠ 2021-12-11 19:47 274阅读 0赞

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

![untitled.JPG][]

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][] 代码

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

转载于:https://www.cnblogs.com/Bluer/archive/2010/10/26/1861114.html

[untitled.JPG]: /images/20211211/7fd1a7a0b18046dbb30a5d1533250c76.png
[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20211211/a94135ab32ea414ea05dc30c8c7a0c94.png