转至论坛你的位置：江西广告网 >> 视觉 >> Web软件 >> 查看帖子

一个网页同时出现选项卡和滑动门的代码

发布日期发布: 2009-10-09 | 发布人发布者: admin | 来源: 江西广告网

CODE:

<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>

分享到 :

本站文章部分内容来自互联网，供读者交流和学习，如有涉及作者版权问题请及时与我们联系，以便更正或删除。感谢所有提供信息的网站，并欢迎各类媒体与我们进行信息共享合作。

关闭本窗口 | 打印 | 收藏此页 | 推荐给好友 | 举报

我也来说两句查看全部回复