CSS滑动门效果
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>最新闻</title>
<style type="text/css">
*{ margin:0px; padding:0px;}
#barbox { width:300px; margin:10px; border:1px #99BBDD solid}
#nva { float:left; width:300px; list-style-type:none; background:#D7E7F7; height:27px; border-bottom:1px #99BBDD solid}
#nva li { float:left; background:#D7E7F7; height:27px; line-height:28px; padding-left:10px; font-size:13px; color:#275C91}
.boxcontent { font-size:14px; color:#333; margin:10px;}
.boxcontent ul{ list-style-type:none;}
.boxcontent ul li{ line-height:23px;}
#content1,#content2{ display:none}
</style>
</head>
<body>
<div id="barbox">
<div id="nva">
<li id="bar1">新闻</li>
<li id="bar2">体育</li>
<li id="bar3">娱乐</li>
</div>
<div id="content">
<!--内容1-->
<div class="boxcontent" id="content1">
<ul>
<li>乐视联盟为新注册会员发放20元红包 无限期</li>
<li>乐视联盟为新注册会员发放20元红包 无限期</li>
<li>乐视联盟为新注册会员发放20元红包 无限期</li>
<li>乐视联盟为新注册会员发放20元红包 无限期</li>
<li>乐视联盟为新注册会员发放20元红包 无限期</li>
<li>乐视联盟为新注册会员发放20元红包 无限期</li>
<li>乐视联盟为新注册会员发放20元红包 无限期</li>
<li>乐视联盟为新注册会员发放20元红包 无限期</li>
<li>乐视联盟为新注册会员发放20元红包 无限期</li>
<li>乐视联盟为新注册会员发放20元红包 无限期</li>
</ul>
</div>
<!--内容2-->
<div class="boxcontent" id="content2">
<ul>
<li>太极酷溜网弹窗上线 称本周将完成拖欠支付</li>
<li>太极酷溜网弹窗上线 称本周将完成拖欠支付</li>
<li>太极酷溜网弹窗上线 称本周将完成拖欠支付</li>
<li>太极酷溜网弹窗上线 称本周将完成拖欠支付</li>
<li>太极酷溜网弹窗上线 称本周将完成拖欠支付</li>
<li>太极酷溜网弹窗上线 称本周将完成拖欠支付</li>
<li>太极酷溜网弹窗上线 称本周将完成拖欠支付</li>
<li>太极酷溜网弹窗上线 称本周将完成拖欠支付</li>
<li>太极酷溜网弹窗上线 称本周将完成拖欠支付</li>
<li>太极酷溜网弹窗上线 称本周将完成拖欠支付</li>
</ul>
</div>
<!--内容3-->
<div class="boxcontent" id="content3">
<ul>
<li>百度联盟:宣传百度美誉度调研 赢IPOD大奖</li>
<li>百度联盟:宣传百度美誉度调研 赢IPOD大奖</li>
<li>百度联盟:宣传百度美誉度调研 赢IPOD大奖</li>
<li>百度联盟:宣传百度美誉度调研 赢IPOD大奖</li>
<li>百度联盟:宣传百度美誉度调研 赢IPOD大奖</li>
<li>百度联盟:宣传百度美誉度调研 赢IPOD大奖</li>
<li>百度联盟:宣传百度美誉度调研 赢IPOD大奖</li>
<li>百度联盟:宣传百度美誉度调研 赢IPOD大奖</li>
<li>百度联盟:宣传百度美誉度调研 赢IPOD大奖</li>
<li>百度联盟:宣传百度美誉度调研 赢IPOD大奖</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
function barDisp(defaultid)
{
var _this = this; //定义整个window对象
var taglist = $("nva").getElementsByTagName("li");
for(i=0;i<taglist.length;i++)
{
_this.$(taglist[i].id).value = i+1; //将bar的ID保存在value
$("content"+(i+1)).style.display = "none";
$("content"+(1)).style.display = "block"; //这两个为默认显示的隐藏的设置
$(taglist[i].id).onmouseover=function()
{
for(j=0;j<taglist.length;j++)
{
$("content"+(j+1)).style.display = "none"; //设置所有不可见
}
_this.$("content"+this.value).style.display = "block"; //将保存的ID取出来作为内容层的ID
}
}
}
function $(oid){
if(typeof(oid) == "string")
return document.getElementById(oid);
return oid;
}
barDisp("content1");
</script>
</body>
</html>
扫一扫
362
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
