您的位置：首页 > Web前端 > CSS

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

2008-03-29 01:53 609 查看

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

<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(http://www.hxcgw.com/bbs/upfile/20079299441652.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(http://www.hxcgw.com/bbs/upfile/200792994426548.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>

<script>...

<!--

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

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>

<head>
<title>简洁Tab</title>
<style type="text/css">

</style>
<script>

</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>
</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>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css div class border function url

相关文章推荐

新的分享

章节导航