滑动门技术

最新推荐文章于 2024-08-07 18:08:58 发布

iteye_14347

最新推荐文章于 2024-08-07 18:08:58 发布

阅读量81

点赞数

分类专栏：技术文档文章标签：生活咨询 XHTML HTML

本文链接：https://blog.csdn.net/iteye_14347/article/details/81678161

版权

技术文档专栏收录该内容

9 篇文章 0 订阅

订阅专栏

[color=darkblue][color=darkblue]<!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">
body{
color: #000;
font-family: "宋体", arial;
font-size: 12px;
background: #fff;
text-align: center;
margin: 0;
}
.nTab{
float: left;
width: 960px;
margin: 0 auto;
border-bottom:1px #AACCEE solid;
background:#d5d5d5;
background-position:left;
background-repeat:repeat-y;
margin-bottom:2px;
}
.nTab .TabTitle{
clear: both;
height: 22px;
overflow: hidden;
}
.nTab .TabTitle ul{
border:0;
margin:0;
padding:0;
}
.nTab .TabTitle li{
float: left;
width: 70px;
cursor: pointer;
padding-top: 4px;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 2px;
list-style-type: none;
}
.nTab .TabTitle .active{background:#fff;border-left:1px #AACCEE solid;border-top:1px #AACCEE solid;border-right:1px #AACCEE solid;border-bottom:1px #fff solid;}
.nTab .TabTitle .normal{background:#EBF3FB;border:1px #AACCEE solid;}
.nTab .TabContent{
width:auto;background:#fff;
margin: 0px auto;
padding:10px 0 0 0;
border-right:1px #AACCEE solid;border-left:1px #AACCEE solid;
}
.none {display:none;}

</style>

<script type="text/javascript">
function nTabs(thisObj,Num){
if(thisObj.className == "active")return;
var tabObj = thisObj.parentNode.id;
var tabList = document.getElementById(tabObj).getElementsByTagName("li");
for(i=0; i <tabList.length; i++)
{
if (i == Num)
{
thisObj.className = "active";
document.getElementById(tabObj+"_Content"+i).style.display = "block";
}else{
tabList[i].className = "normal";
document.getElementById(tabObj+"_Content"+i).style.display = "none";
}
}
}
</script>

</head>
<body>
<div align="center" style="padding-left:25px;">

<div class="nTab">

<div class="TabTitle">
<ul id="myTab0">
<li class="active" οnmοuseοver="nTabs(this,0);">全部</li>
<li class="normal" οnmοuseοver="nTabs(this,1);">日志</li>
<li class="normal" οnmοuseοver="nTabs(this,2);">咨询</li>
<li class="normal" οnmοuseοver="nTabs(this,3);">相册</li>
<li class="normal" οnmοuseοver="nTabs(this,4);">商城</li>
<li class="normal" οnmοuseοver="nTabs(this,5);">社区</li>
</ul>
</div>

<div class="TabContent">
<div id="myTab0_Content0"> 000 </div>
<div id="myTab0_Content1" class="none">111</div>
<div id="myTab0_Content2" class="none">222</div>
<div id="myTab0_Content3" class="none">333</div>
<div id="myTab0_Content4" class="none">444</div>
<div id="myTab0_Content5" class="none">555</div>
</div>
</div>

</div>

</body>
</html>

---------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>简洁的滑动门(选项卡)效果-JS特效学院|JSWEB8.cn</title>
<style type="text/css">

</style>
<script>

</script>
</head>
<body>
<br><br>
<div id="Tab1">
<div class="Menubox">
<ul>
<li id="one1" οnmοuseοver="setTab('one',1,4)" >新闻</li>
<li id="one2" οnmοuseοver="setTab('one',2,4)" >财经</li>
<li id="one3" οnmοuseοver="setTab('one',3,4)">娱乐</li>
<li id="one4" οnmοuseοver="setTab('one',4,4)">生活</li>
</ul>
</div>
<div class="Contentbox">
<div id="jsweb8_one_1" >新闻列表</div>
<div id="jsweb8_one_2" style="display:none">财经列表</div>
<div id="jsweb8_one_3" style="display:none">娱乐列表</div>
<div id="jsweb8_one_4" style="display:none">生活列表</div>
</div>
</div>
<br>
<div id="Tab2">
<div class="Menubox">
<ul>
<li id="two1" οnclick="setTab('two',1,4)" >新闻</li>
<li id="two2" οnclick="setTab('two',2,4)" >财经</li>
<li id="two3" οnclick="setTab('two',3,4)">娱乐</li>
<li id="two4" οnclick="setTab('two',4,4)">生活</li>
</ul>
</div>
<div class="Contentbox">
<div id="jsweb8_two_1" >新闻列表</div>
<div id="jsweb8_two_2" style="display:none">财经列表</div>
<div id="jsweb8_two_3" style="display:none">娱乐列表</div>
<div id="jsweb8_two_4" style="display:none">生活列表</div>
</div>
</div>
</body>
</html>[/color]

iteye_14347

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
滑动门技术

[color=darkblue][color=darkblue] 我的滑动门 body{ color: #000; font-family: "宋体", arial; font-size: 12px; background: #fff; text-align: center; margin: 0; } .nTab{ float...
复制链接

扫一扫