JavaScript+Css打造三种简洁的Tab网页选项卡

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<

html

xmlns

=

"http://www.w3.org/1999/xhtml"

>

<

head

>

<

title

>JavaScript+Css打造三种简洁的Tab网页选项卡_网页代码站(www.webdm.cn)</

title

>

<

style

type

=

"text/css"

>

<!--

body,div,ul,li{

margin:0auto;

padding:0;

}

body{

font:12px"宋体";

text-align:center;

}

a:link{

color:#00F;

text-decoration:none;

}

a:visited{

color:#00F;

text-decoration:none;

}

a:hover{

color:#c00;

text-decoration:underline;

}

ul{

list-style:none;

}

.main{

clear:both;

padding:8px;

text-align:center;

}

/*第一种形式*/

#tabs0{

height:200px;

width:400px;

border:1pxsolid#cbcbcb;

background-color:#f2f6fb;

}

.menu0{

width:400px;

}

.menu0li{

display:block;

float:left;

padding:4px0;

width:100px;

text-align:center;

cursor:pointer;

background:#FFFFff;

}

.menu0li.hover{

background:#f2f6fb;

}

#main0ul{

display:none;

}

#main0ul.block{

display:block;

}

/*第二种形式*/

#tabs1{

text-align:left;

width:400px;

}

.menu1box{

position:relative;

overflow:hidden;

height:22px;

width:400px;

text-align:left;

}

#menu1{

position:absolute;

top:0;

left:0;

z-index:1;

}

#menu1li{

float:left;

display:block;

cursor:pointer;

width:72px;

text-align:center;

line-height:21px;

height:21px;

}

#menu1li.hover{

background:#fff;

border-left:1pxsolid#333;

border-top:1pxsolid#333;

border-right:1pxsolid#333;

}

.main1box{

clear:both;

margin-top:-1px;

border:1pxsolid#333;

height:181px;

width:400px;

}

#main1ul{

display:none;

}

#main1ul.block{

display:block;

}

/*第三种形式*/

.menu2box{

position:relative;

overflow:hidden;

height:22px;

width:400px;

text-align:left;

background:#FFFFff;

}

#tabs2{

height:200px;

width:400px;

border:1pxsolid#cbcbcb;

background-color:#f2f6fb;

}

#tip2{

position:absolute;

top:0;

left:0;

height:22px;

line-height:22px;

z-index:0;

width:100px;

background:#f2f6fb;

}

#menu2{

position:absolute;

top:0;

left:0;

z-index:1;

}

#menu2li{

display:block;

float:left;

padding:4px0;

width:100px;

text-align:center;

cursor:pointer;

}

-->

</

style

>

<

script

>

<!--

/*第一种形式第二种形式更换显示样式*/

functionsetTab(m,n){

vartli=document.getElementById("menu"+m).getElementsByTagName("li");

varmli=document.getElementById("main"+m).getElementsByTagName("ul");

for(i=0;i<tli.length;i++){

tli[i].className=i==n?"hover":"";

mli[i].style.display=i==n?"block":"none";

}

}

/*第三种形式利用一个背景层定位*/

varm3={0:"",1:"评论内容",2:"技术内容",3:"点评内容"}

functionnowtab(m,n){

if(n!=0&&m3[0]=="")m3[0]=document.getElementById("main2").innerHTML;

document.getElementById("tip"+m).style.left=n*100+'px';

document.getElementById("main2").innerHTML=m3
;

}

//-->

</

script

>

</

head

>

<

body

>

<

br

/>

<

br

/>

<!--第一种形式-->

<

div

id

=

"tabs0"

>

<

ul

class

=

"menu0"

id

=

"menu0"

>

<

li

onclick

=

"setTab(0,0)"

class

=

"hover"

>新闻</

li

>

<

li

onclick

=

"setTab(0,1)"

>评论</

li

>

<

li

onclick

=

"setTab(0,2)"

>技术</

li

>

<

li

onclick

=

"setTab(0,3)"

>点评</

li

>

</

ul

>

<

div

class

=

"main"

id

=

"main0"

>

<

ul

class

=

"block"

><

li

>新闻列表</

li

></

ul

>

<

ul

><

li

>评论列表</

li

></

ul

>

<

ul

><

li

>技术列表</

li

></

ul

>

<

ul

><

li

>点评列表</

li

></

ul

>

</

div

>

</

div

>

<

br

/>

<

br

/>

<!--第二种形式-->

<

div

id

=

"tabs1"

>

<

div

class

=

"menu1box"

>

<

ul

id

=

"menu1"

>

<

li

class

=

"hover"

onmouseover

=

"setTab(1,0)"

><

a

href

=

"#"

>新闻</

a

></

li

>

<

li

onmouseover

=

"setTab(1,1)"

><

a

href

=

"#"

>评论</

a

></

li

>

<

li

onmouseover

=

"setTab(1,2)"

><

a

href

=

"#"

>技术</

a

></

li

>

<

li

onmouseover

=

"setTab(1,3)"

><

a

href

=

"#"

>点评</

a

></

li

>

</

ul

>

</

div

>

<

div

class

=

"main1box"

>

<

div

class

=

"main"

id

=

"main1"

>

<

ul

class

=

"block"

><

li

>新闻列表</

li

></

ul

>

<

ul

><

li

>评论列表</

li

></

ul

>

<

ul

><

li

>技术列表</

li

></

ul

>

<

ul

><

li

>点评列表</

li

></

ul

>

</

div

>

</

div

>

</

div

>

<

br

/>

<

br

/>

<!--第三种形式-->

<

div

id

=

"tabs2"

>

<

div

class

=

"menu2box"

>

<

div

id

=

"tip2"

></

div

>

<

ul

id

=

"menu2"

>

<

li

class

=

"hover"

onmouseover

=

"nowtab(2,0)"

><

a

href

=

"#"

>新闻</

a

></

li

>

<

li

onmouseover

=

"nowtab(2,1)"

><

a

href

=

"#"

>评论</

a

></

li

>

<

li

onmouseover

=

"nowtab(2,2)"

><

a

href

=

"#"

>技术</

a

></

li

>

<

li

onmouseover

=

"nowtab(2,3)"

><

a

href

=

"#"

>点评</

a

></

li

>

</

ul

>

</

div

>

<

div

class

=

"main"

id

=

"main2"

>

网页代码站

</

div

>

</

div

>

</

body

>

</

html

>

<

br

>

<

a

href

=

"http://www.webdm.cn"

>网页代码站</

a

>-最专业的代码下载网站-致力为中国站长提供有质量的代码！