tab 滑动/点击切换 封装
程序员文章站
2022-04-21 16:34:01
...
新建 html 文件 ， 如： index.html , 引入一个 app.js 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>tab 滑动/点击切换 封装</title>
</head>
<style>
.active{
color: red;
background: #eeeeee;
}
ul{
list-style: none;
padding: 0;
margin: 0;
}
#item1{
margin-top: 10px;
}
</style>
<body>
<div id="tab1">
<span class="active">最新新闻</span>
<span>行业新闻</span>
</div>
<div id="item1">
<ul>
<li>最新新闻</li>
<li>最新新闻</li>
<li>最新新闻</li>
<li>最新新闻</li>
<li>最新新闻</li>
</ul>
<ul style="display:none">
<li>行业新闻</li>
<li>行业新闻</li>
<li>行业新闻</li>
<li>行业新闻</li>
<li>行业新闻</li>
</ul>
</div>
</body>
<script src="app.js"></script>
</html>
页面打开 如图所示：
这里样式不是重点 ， 我就不美化了 ！
app.js 文件
1 ： 先 写个构造函数 tab
// options 为一个对象
function Tab(options) {
this.id = document.getElementById(options.id);
this.idChild = this.id.getElementsByTagName(options.idChild);
this.passiveId = document.getElementById(options.passiveId);
this.passiveChild = this.passiveId.getElementsByTagName(options.passiveChild);
this.events = options.events
this.init(); // 初始化方法
}
2 : 为 tab 添加原型方法
Tab.prototype = {
init:function() {
// 初始化
var _this = this;
for (var i = 0; i < this.idChild.length; i++) {
this.idChild[i].index = i;
this.idChild[i][this.events] = function(){
_this.change(this.index);
}
}
},
change:function(i){
for (var j = 0; j < this.passiveChild.length; j++) {
this.passiveChild[j].style.display = 'none';
this.idChild[j].className = '';
}
this.passiveChild[i].style.display = 'block';
this.idChild[i].className = "active";
}
};最后 ： 我在需要用的时候 ， 直接实例化 这个构造函数 即可 ！
new Tab({
id:"tab1",
idChild:"span",
passiveId:"item1",
passiveChild:"ul",
events:"onmouseover" // onclick 点击事件
})PS : 实例化对象 参数可自行更改 ！