先运行下面的代码查看效果:
提示:您可以先修改部分代码再运行
下面来说说如何实现这种选项卡特效:
1、编写html代码,我们用了两个<ul>标签来嵌套,第一个ul里面是tab选项卡的标题,第二个是显示的内容,每个ul里面有三个li,每个li都给一个递增的ID。具体为什么这么做,往下看即可明白。如下:
02 | < li id = "menu0" onmouseover = "secBoard(0)" class = "sec2" >查涤纶 25t</ li > |
03 | < li id = "menu1" onmouseover = "secBoard(1)" class = "sec1" >T110E5</ li > |
04 | < li id = "menu2" onmouseover = "secBoard(2)" class = "sec1" >M48A1</ li > |
06 | < ul id = "main" class = "clearfloat" > |
07 | < li id = "main0" class = "block" > |
10 | < li id = "main1" class = "unblock" > |
13 | < li id = "main2" class = "unblock" > |
2、编写css样式。第一个ul的li都左浮动。为了不对第二个造成影响,我们清楚了浮动“ class='clearfloat'”。第二个ul的第一个li显示,第二个li和第三个li都隐藏。并且对第一个ul里面的li定义了正常状态下的css样式,即“sec1”和选中状态下的样式,即“sec2”
01 | <style type= "text/css" > |
02 | ul,li{ margin : 0 ; padding : 0 ;} |
03 | .clearfloat{ clear : both ; height : 0 !important ;} |
04 | #menu { margin : 0px ; padding : 0px ; list-style : none ;} |
05 | #menu li{ list-style : none ; display : block ; width : 200px ; text-align : center ; float : left ; margin : 0px ; padding-top : 2px ; padding-right : 0px ; padding-bottom : 6px ; padding-left : 0px ; cursor : pointer ; padding-top : 6px ;} |
07 | .sec 1 { background-color : #360D4E ; height : 19px ; font-size : 14px ; color : #FFFFFF ; border-bottom : none ;} |
09 | .sec 2 { background-color : #DEB447 ; height : 17px ; border : #fff 1px solid ; color : #fff ; border-bottom : #fff 2px solid ; border-top : none ; font-weight : bold ; font-size : 14px ;} |
10 | . block { display : block ; margin-top : 10px ; } |
11 | .unblock { display : none ; margin-top : 10px ; } |
12 | #main{ list-style : none ; margin : 20px 0 0 0 ; width : 600px ; padding-top : 10px ;} |
13 | #main li{ width : 600px ; border : none ;} |
3、编写js代码,定义了一个名称为“secBoard”的函数,参数为第一个ul里面li的索引值,并且在html代码里每个li都给一个属性“onmouseover='secBoard(索引)'”,当鼠标移上去执行函数。通过写两个循环函数,循环出li的index,即索引值,通过window.document.getElementById("menu"+i).className="sec1"给未选中的li加样式,通过window.document.getElementById("menu"+n).className="sec2"给选中的li加样式。同理,第二个循环控制第二个ul里面的li的显示隐藏:window.document.getElementById("main"+i).style.display="none"隐藏li,window.document.getElementById("main"+n).style.display="block"显示当前的li。代码如下:
01 | <script language= "javascript" > |
04 | window.document.getElementById( "menu" +i).className= "sec1" ; |
05 | window.document.getElementById( "menu" +n).className= "sec2" ; |
08 | window.document.getElementById( "main" +i).style.display= "none" ; |
09 | window.document.getElementById( "main" +n).style.display= "block" ; |
(责任编辑:网页模板)