300字范文 > 非常不错的css滑动门效果网页选项卡代码

非常不错的css滑动门效果网页选项卡代码

时间：2022-08-04 00:33:06

好好好强大，可以试试。先看效果图——

< html >

< head >

< title > 简洁Tab </ title >

< style type ="text/css" > ...

<!--

body,div,ul,li{...}{

padding:0;

text-align:center;

}

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

/**//*选项卡1*/

#Tab1{...}{

width:460px;

margin:0px;

padding:0px;

margin:0auto;}

/**//*选项卡2*/

#Tab2{...}{

width:576px;

margin:0px;

padding:0px;

margin:0auto;}

/**//*菜单class*/

.Menubox{...}{

width:100%;

background:url(/bbs/upfile/9299441652.gif);

height:28px;

line-height:28px;

}

.Menuboxul{...}{

margin:0px;

padding:0px;

}

.Menuboxli{...}{

float:left;

display:block;

cursor:pointer;

width:114px;

text-align:center;

color:#949694;

font-weight:bold;

}

.Menuboxli.hover{...}{

padding:0px;

background:#fff;

width:116px;

border-left:1pxsolid#A8C29F;

border-top:1pxsolid#A8C29F;

border-right:1pxsolid#A8C29F;

background:url(/bbs/upfile/92994426548.gif);

color:#739242;

font-weight:bold;

height:27px;

line-height:27px;

}

.Contentbox{...}{

clear:both;

margin-top:0px;

border:1pxsolid#A8C29F;

border-top:none;

height:181px;

text-align:center;

padding-top:8px;

}

-->

</ style >

< script > ...

<!--

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

functionsetTab(name,cursel,n)...{

for(i=1;i<=n;i++)...{

varmenu=document.getElementById(name+i);

varcon=document.getElementById("con_"+name+"_"+i);

menu.className=i==cursel?"hover":"";

con.style.display=i==cursel?"block":"none";

}

//-->

</ script >

</ head >

< body >

< br >< br >

< div id ="Tab1" >

< div class ="Menubox" >

< ul >

< li id ="one1" onmouseover ="setTab('one',1,4)" class ="hover" > 新闻1 </ li >

< li id ="one2" onmouseover ="setTab('one',2,4)" > 新闻2 </ li >

< li id ="one3" onmouseover ="setTab('one',3,4)" > 新闻3 </ li >

< li id ="one4" onmouseover ="setTab('one',4,4)" > 新闻4 </ li >

</ ul >

</ div >

< div class ="Contentbox" >

< div id ="con_one_1" class ="hover" > 新闻列表1 </ div >

< div id ="con_one_2" style ="display:none" > 新闻列表2 </ div >

< div id ="con_one_3" style ="display:none" > 新闻列表3 </ div >

< div id ="con_one_4" style ="display:none" > 新闻列表4 </ div >

</ div >

< br >

< div id ="Tab2" >

< div class ="Menubox" >

< ul >

< li id ="two1" onmouseover ="setTab('two',1,4)" class ="hover" > 新闻1 </ li >

< li id ="two2" onmouseover ="setTab('two',2,4)" > 新闻2 </ li >

< li id ="two3" onmouseover ="setTab('two',3,4)" > 新闻3 </ li >

< li id ="two4" onmouseover ="setTab('two',4,4)" > 新闻4 </ li >

</ ul >

</ div >

< div class ="Contentbox" >

< div id ="con_two_1" > 新闻列表1 </ div >

< div id ="con_two_2" style ="display:none" > 新闻列表2 </ div >

< div id ="con_two_3" style ="display:none" > 新闻列表3 </ div >

< div id ="con_two_4" style ="display:none" > 新闻列表4 </ div >

</ div >

</ body >

</ html >

<head>

<title>简洁Tab</title>

<!--

body,div,ul,li{

padding:0;

text-align:center;

}

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

/*选项卡1*/

#Tab1{

width:460px;

margin:0px;

padding:0px;

margin:0 auto;}

/*选项卡2*/

#Tab2{

width:576px;

margin:0px;

padding:0px;

margin:0 auto;}

/*菜单class*/

.Menubox {

width:100%;

background:url(/bbs/upfile/9299441652.gif);

height:28px;

line-height:28px;

}

.Menubox ul{

margin:0px;

padding:0px;

}

.Menubox li{

float:left;

display:block;

cursor:pointer;

width:114px;

text-align:center;

color:#949694;

font-weight:bold;

}

.Menubox li.hover{

padding:0px;

background:#fff;

width:116px;

border-left:1px solid #A8C29F;

border-top:1px solid #A8C29F;

border-right:1px solid #A8C29F;

background:url(/bbs/upfile/92994426548.gif);

color:#739242;

font-weight:bold;

height:27px;

line-height:27px;

}

.Contentbox{

clear:both;

margin-top:0px;

border:1px solid #A8C29F;

border-top:none;

height:181px;

text-align:center;

padding-top:8px;

}

-->

</style>

<!--

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

function setTab(name,cursel,n){

for(i=1;i<=n;i++){

var menu=document.getElementById(name+i);

var con=document.getElementById("con_"+name+"_"+i);

menu.className=i==cursel?"hover":"";

con.style.display=i==cursel?"block":"none";

}

//-->

</script>

</head>

<body>

<ul>

</ul>

</div>

</div>

<br>

<ul>

</ul>

</div>

</div>

</body>

</html>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。