一聚教程网：一个值得你收藏的教程网站

ps教程 | flash教程 | 路由器设置 | Jsp教程 | 加入收藏

首页 php教程 asp.net教程 css教程网页制作网页特效手机开发办公数码

当前位置：一聚教程网 > 网页特效 > 页面特效

推荐专题

最新下载

1

冠唐云仓库管理
大小：56.71 MB 类型： 商务办公
2

呱呱财经最新版
大小：39.12 MB 类型： 学习理财
3

导弹拦截最新版
大小：31.80 MB 类型： 策略塔防
4

抖音火山版最新版
大小：215.59 MB 类型： 影音播放
5

率土之滨最新版
大小：1.84 GB 类型： 三国网游
6

抖音火山版
大小：223.55 MB 类型： 影音播放
7

批菜网
大小：35.90 MB 类型： 生活服务
8

新氧医美最新版
大小：118.86 MB 类型： 生活服务
9

篮下王者最新版
大小：645.13 MB 类型： 动作竞技
10

鱼吃鱼
大小：20.13 MB 类型： 休闲养成

热门教程

1

解决IDEA springboot"spring-boot-maven-plugin"报红问题方法
时间：2021-04-16 类型： Java技巧及代码
2

反差婊是什么梗反差婊是什么意思
时间：2020-04-27 类型： 互联网加
3

今天几号十六号咯是什么梗今天几号十六号咯是什么意思
时间：2022-03-28 类型： 互联网加
4

抖音江可爱事件是什么梗抖音江可爱事件是什么意思
时间：2020-08-18 类型： 互联网加
5

创世纪秩序金钱怎么修改创世纪秩序金钱修改方法
时间：2022-01-06 类型： 手游攻略
6

番茄畅听金币提醒关闭方法
时间：2023-10-31 类型： 手游攻略
7

西格玛男人永远不会掉入女人的陷阱梗意思介绍
时间：2023-08-14 类型： 手游攻略
8

五黑一白是什么梗五黑一白是什么意思
时间：2022-01-28 类型： 互联网加
9

TeamViewer怎么设置开机启动 TeamViewer开机启动设置方法
时间：2018-02-15 类型： 电脑常见问题
10

你是来拉屎的吧是什么梗你是来拉屎的吧出处是哪儿
时间：2020-04-16 类型： 互联网加

js Tab选项卡特效代码

时间：2013-12-04 编辑：简简单单来源：一聚教程网

提示：您可以先修改部分代码再运行

<!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=utf-8" />
<title>Tab选项卡</title>
<style type="text/<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>">
body {font-size: 12px;}
ul {margin: 0;padding: 0;list-style: none;overflow: hidden;}
ul li {float: left;line-padding: 0 10px;cursor:pointer;}
#cn-lazy,#cn-lazy2{}
#cn-lazy div,#cn-lazy2 div{clear: both;display: none;}
.cn-current {background: #CCC;}
</style>
</head>

<body>
<div id="cn-lazy">
  <ul>
    <li class="cn-current">选项卡一</li>
    <li>选项卡二</li>
    <li>选项卡三</li>
  </ul>
  <div style="display:block">内容一</div>
  <div>内容二</div>
  <div>内容三</div>
</div>
<div id="cn-lazy2">
  <ul>
    <li class="cn-current">选项卡一</li>
    <li>选项卡二</li>
    <li>选项卡三</li>
  </ul>
  <div style="display:block">内容一</div>
  <div>内容二</div>
  <div>内容三</div>
</div>

<script type="text/javascript">
function cnTab(cnTable,cnNum){
	var Tab= document.getElementById(cnTable).getElementsByTagName("ul");
		Tab=Tab[0].getElementsByTagName("li");
	var cnDiv= document.getElementById(cnTable).getElementsByTagName("div");
	var TabNum = Tab.length;
	var cnDivNum=cnDiv.length;
	for(i=0;i<TabNum; i++){
		Tab[i].className = "";
	}
		Tab[cnNum].className = "cn-current";
	for(i=0;i<cnDivNum;i++){
		cnDiv[i].style.display = "none";
	}
	cnDiv[cnNum].style.display = "block";
}
window.onload=function(){
	var TabId=new Array("cn-lazy","cn-lazy2")
	for(j=0;j<TabId.length;j++){
		var Tab= document.getElementById(TabId[j]).getElementsByTagName("ul");
		Tab=Tab[0].getElementsByTagName("li");
		for(i=0;i<Tab.length;i++){
			Tab[i].DivId=TabId[j];
			Tab[i].LiId=i;
			Tab[i].onclick=function(){
			cnTab(this.DivId,this.LiId);
			}
		}
	}
}
</script>
</body>
</html></td>
	  </tr>
	</table>

提示：您可以先修改部分代码再运行

上一个： javascript弹出层实例代码
下一个： js后台常用的伸缩(折叠)菜单代码

相关文章

热门栏目