yd12300浜戦《绾胯矾(鑲′唤)鏈夐檺鍏徃

首页 > 在企业网站建设中一个页面多个选项卡代码推荐！

在企业网站建设中一个页面多个选项卡代码推荐！

时间：2012/11/23 10:37:23 作者：tsccwl 人气：标签：

　　

在唐山企业网站建设中一个页面多个选项卡代码推荐！

各个选项卡互不影响独立运行

只用一个JS代码就可以

代码如下：

<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>


<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>
 

<div class="nTab">
<div class="TabTitle">
<ul id="myTab2">
<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="myTab2_Content0">简洁TAB，滑动门，选项卡</div>
<div id="myTab2_Content1" class="none">兼容性好</div>
</div>
</div>

提示：复制和保存代码功能在FF下无效。

上一篇：淘宝“12.12”玩法升级消费者、商家说了算
下一篇：百度CEO李彦宏与盖茨会面教盖茨“被吸烟，我不干”

地址：中国.唐山市路北区尚座即理工大学对面中国.河北唐山遵化市唐山做网站
本站网址：www.tswzsj.com联系电话：0315-6025099 建站热线：浜戦《yd12300绾胯矾

唐山网站建设报价咨询

网站售前售后服务

冀ICP备12014317号-1 版权所有:唐山长城网络 www.tswzsj.com