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

2024-09-05 12:20:18

字体：大中小

来源：转载

供稿：网友

简洁TAB效果，一个网页同时出现选项卡和动门的代码，有一些朋友问到了这个问题，现在这段代码可以帮你开拓一下思路。颜色搭配是随便弄的，请自己调整一下。

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

上一篇：折叠菜单，竖向的

下一篇：DIV学写带动画的CSS+JS下拉导航条

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注