选项卡js版封装
以下是封装函数：
// id：最外边大盒的id名
function tab(id,ev){
var oWrap = document.getElementById(id);
var aLi = oWrap.getElementsByTagName("li");
var aDiv = oWrap.getElementsByTagName("div");
for(var i=0;i<aLi.length;i++){
aLi[i].index = i;
aLi[i][ev]=function(){
// [ev]:触发的是什么事件，比如.onclick，这里用[参数]，中括号中可以传递不同的事件
for(var i=0;i<aLi.length;i++){
aLi[i].className="";
aDiv[i].className="";
}
this.className="active";
aDiv[this.index].className="show";
}
}
}
以下是格式：
<body>
<div class="wrap" id="tab">
<ul >
<li class="active">新闻</li>
<li>体育</li>
<li>财经</li>
</ul>
<div class="show">NewsNewsNewsNewsNewsNews</div>
<div>playplayplayplayplayplay</div>
<div>financefinancefinancefinance</div>
</div>
<div class="wrap" id="tab2">
<ul >
<li class="active">新闻</li>
<li>体育</li>
<li>财经</li>
</ul>
<div class="show">NewsNewsNewsNewsNewsNews</div>
<div>playplayplayplayplayplay</div>
<div>financefinancefinancefinance</div>
</div>
</body>
以下是css样式及函数调用：
<style>
body,ul,li,div{margin:0; padding:0;}
ul{list-style: none;}
.wrap{width:300px;height:300px;margin:100px auto 0;border:1px #ccc solid;}
.wrap ul{height:30px;background: #CCCCCC;}
.wrap ul li{padding:0 20px;float:left;font:14px/30px "微软雅黑";line-height: 30px;}
.wrap ul .active{background: #fff;border-top:3px #FF1493 solid;line-height: 27px;}
.wrap div{display: none;}
.wrap .show{display: block;}
</style>
<script src="js/tab_js.js" type="text/javascript"></script>
<script>
window.onload=function(){
tab("tab","onclick");
tab("tab2","onmouseover")
}
</script>
以后只需调用函数就可以了，可以将事件形式以实参的方式传进去，更改事件触发属性
最新文章
- 安装免费的正版Windows10操作系统 - 初学者系列 - 学习者系列文章
- centos分区
- 关于Bitcode的探索
- 接收ET采集器数据页面
- POJ 2826 An Easy Problem?!
- Codeforces 219D Choosing Capital for Treeland
- 小言C指针
- 201521123098 《Java程序设计》第11周学习总结
- 从源码角度看LinkedList一些基本操作（jdk1.7）
- AS 实机测试 ADB.exe 提示
- 算法题丨Remove Element
- Android Demo 下拉刷新+加载更多+滑动删除
- windowns10安装httpd
- React生命周期详解
- logstash 自动重新加载配置
- 常用sql语句总结（一）（查询）
- MySQL - 常见的存储引擎
- FileItem类的常用方法(关于文件上传的)
- R语言学习 第一篇：变量和向量
- Altium CAED 国际认证操作题例题（含下载）