欢迎来到圣道地球村!
当前位置:首页 > 网络资源 > 特效代码 > 网页选项卡和动门代码,颜色搭配是随便调整 内容

网页选项卡和动门代码,颜色搭配是随便调整

选择字号: 超大 标准 发布时间:2016-12-18 10:23 | 作者:编辑

<head>
<title>简洁TAB</title>
<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>
<style type="text/css">
<!--
*{margin:0;padding:0;list-style:none;font-size:14px}
.nTab{width:500px;margin:20px auto;background:#aaa;border:1px solid #333;overflow:hidden}
.none {display:none;}
.nTab .TabTitle li{float:left;cursor:pointer;height:30px;line-height:30px;font-weight:bold;text-align:center;width:124px}
.nTab .TabTitle li a{text-decoration:none;}
.nTab .TabTitle .active{background:#ccc;color:#336699}
.nTab .TabTitle .normal{background:#666;color:#fff}
.nTab .TabContent{clear:both;overflow:hidden;background:#fff;padding:5px;display:block}
-->
</style>
</head>
<body>
<div class="nTab">
<div class="TabTitle">
<ul id="myTab">
<li class="active" onmouseover="nTabs(this,0);">ASP</li>
<li class="normal" onmouseover="nTabs(this,1);">PHP</li>      
</ul>
</div>
   <div class="TabContent">
<div id="myTab_Content0">同一页面,滑动门,选项卡同在</div>
<div id="myTab_Content1" class="none">兼容性好</div>
</div> 
</div>


<div class="nTab">
<div class="TabTitle">
<ul id="myTab1">
<li class="active" onclick="nTabs(this,0);">ASP</li>
<li class="normal" onclick="nTabs(this,1);">PHP</li>      
</ul>
</div>
   <div class="TabContent">
<div id="myTab1_Content0">简洁TAB,滑动门,选项卡</div>
<div id="myTab1_Content1" class="none">兼容性好</div> 
   </div> 
</div>
</body>
</html>

网站分类
最新文章
随机文章