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

无图版CSS 滑动门，大多数门户都在用_网页代码站(www.webdm.cn)

2010-12-23 14:33 926 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无图版CSS 滑动门，大多数门户都在用_网页代码站(www.webdm.cn)</title>
<style type="text/css">
.tabber{border:1px solid #AACCEE;clear:both;}
.tabber .tmenu ul{margin:0;padding:0; display:block;}
.tabber .tmenu li{
float:left;
height:25px;
line-height:25px;
border-bottom:1px solid #AACCEE;
border-right:1px solid #AACCEE;
border-color:#AACCEE;
border-width:1px;
color:#004499;
cursor:pointer;
display:block;
text-align:center;}
.tabber .tmenu li.on{
background:#FFF;
border-bottom-color:#FFFFFF;
cursor:default;
font-weight:bold;}
.tabber .tbox{
height:267px;
clear:both;}
.tabber .tbox div p{padding:15px;}
.block{display:block;}
.none{display:none;}
</style>
<script type="text/javascript">
function SetTab(tab,id,cnt){
var menus=document.getElementById(tab).getElementsByTagName("li");
for(i=0;i<cnt;i++){
i==id?menus[i].className="on":menus[i].className="";
i==id?document.getElementById(tab+"-content"+i).className="block":document.getElementById(tab+"-content"+i).className="none";
}
}
</script>
</head>
<body>
<div class="tabber" style="width: 529px;">
<div class="tmenu">
<ul id="tab1">
<li style="width: 85px;" class="on" onmouseover="SetTab('tab1',0,4);">新闻</li>
<li style="width: 85px;" onmouseover="SetTab('tab1',1,4);">娱乐</li>
<li style="width: 85px;" onmouseover="SetTab('tab1',2,4);">财经</li>
<li style="width: 85px;" onmouseover="SetTab('tab1',3,4);">读书</li>
<li style="width: 185px; border-bottom: solid 1px #AACCEE; border-right: none;"><a
href="#">关注更多？</a></li>
</ul>
</div>
<div class="tbox">
<div id="tab1-content0" class="block">
<p>看新闻，上网易</p>
</div>
<div id="tab1-content1" class="none">
<p>娱乐七天乐</p>
</div>
<div id="tab1-content2" class="none">
<p>今天股市暴跌</p>
</div>
<div id="tab1-content3" class="none">
<p>读书使人进步……</p>
</div>
</div>
</div>
<br />
<div class="tabber" style="width: 343px;">
<div class="tmenu">
<ul id="tab2">
<li style="width: 85px;" class="on" onmouseover="SetTab('tab2',0,4);">新闻</li>
<li style="width: 85px;" onmouseover="SetTab('tab2',1,4);">娱乐</li>
<li style="width: 85px;" onmouseover="SetTab('tab2',2,4);">Ajax</li>
<li style="width: 85px; border-right: none;" onmouseover="SetTab('tab2',3,4);">编程</li>
</ul>
</div>
<div class="tbox">
<div id="tab2-content0" class="block">
<p>最新的新闻内容</p>
</div>
<div id="tab2-content1" class="none">
<p>时尚娱乐资讯</p>
</div>
<div id="tab2-content2" class="none">
<p>Ajax成就未来……</p>
</div>
<div id="tab2-content3" class="none">
<p> ASP.NET...</p>
</div>
</div>
</div>
</body>
</html>

<a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！

文章来自：http://www.webdm.cn/webcode/d179fc50-c613-4ad7-a96a-c3c4794a9954.html

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

标签：

相关文章推荐

新的分享

章节导航