<!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>
<style>
body {
display: flex;
justify-content: center;
/* align-items: center; */
width: 100vw;
height: 100vh;
}
main {
width: 400px;
flex-direction: column;
position: relative;
margin-right: 20px;
}
main nav {
display: flex;
height: 50px;
align-items: center;
}
main nav a,main nav span {
background: #95a5a6;
/* margin-right: px; */
padding: 10px 20px;
border: solid 1px #333;
color: #fff;
text-decoration: none;
cursor: pointer;
}
main nav a:first-of-type,main nav span:first-of-type {
background: #e67e22;
}
section,div {
height: 200px;
width: 100%;
background: #f1c40f;
position: absolute;
font-size: 5em;
display: none;
}
.hd-tab section:first-of-type,.hd-tab div:first-of-type {
display: block;
}
section:nth-child(even),div:nth-child(even) {
background: #27ae60;
}
</style>
</head>
<body>
<main class="tab1">
<nav>
<a href="javascript:;">后盾人</a>
<a href="javascript:;">hdcms</a>
</nav>
<section>1</section>
<section>2</section>
</main>
<main class="tab2">
<nav>
<span href="javascript:;">后盾人</span>
<span href="javascript:;">hdcms</span>
</nav>
<div>1</div>
<div>2</div>
</main>
</body>
<script type="text/html">
// 继承关系
function extend(child,parent){
child.prototype = Object.create(parent.prototype);
child.prototype.constructor = child;
}
function Parent(){};
Parent.prototype.show = function(){
this.style.display = "block";
}
Parent.prototype.hide = function(){
this.style.display = "none";
}
Parent.prototype.background = function(color){
this.style.backgroundColor = color;
}
// let tab1 = document.querySelector(".tab1");
// Parent.prototype.hide.call(tab1);
// console.log(tab1);
function Tab(args){
// let el = document.querySelector(el);
// console.log(el);
// console.log(args);
args = Object.assign({el:null,link:"a",section:"section",callback:null},args);
this.tab = document.querySelector(args["el"]);
this.links = this.tab.querySelectorAll(args["link"]);
// console.log(this.links);
this.section = this.tab.querySelectorAll(args["section"]);
this.callback = args["callback"];
}
extend(Tab,Parent);
Tab.prototype.run = function(){
this.reset();
this.action(0);
this.bindEvent();
}
Tab.prototype.reset = function(){
// console.log('11');
// this.background.call(this.links,"#95a5a6");
this.links.forEach((el,index)=>{
this.background.call(this.links[index],"#95a5a6");
this.hide.call(this.section[index]);
})
}
Tab.prototype.action = function(index){
// console.log(this.links[index]);
// this.links[index].style.backgroundColor = "#f00";
this.background.call(this.links[index],"#e67e22");
this.show.call(this.section[index]);
}
Tab.prototype.bindEvent = function(){
this.links.forEach((element,index) => {
// console.log(this);
// element.addEventListener("click",function(){
element.addEventListener("click",()=>{
// console.log(index);
// console.log(element);
// this.tab.background("#f00");
// console.log(this);
this.reset();
this.action(index);
// console.log(this.callback);
if(this.callback){
this.callback();
};
});
});
}
new Tab({el:".tab1",callback:function(){
console.log('callback...');
}}).run();
new Tab({el:".tab2",link:"span",section:"div"}).run();
</script>
<script>
function extend(child,parent){
child.prototype = Object.create(parent.prototype);
child.prototype.constructor = child;
}
function Father(){}
Father.prototype.hide = function(){
this.style.display = "none"
}
Father.prototype.show = function(){
this.style.display = "block"
// console.log('111');
}
Father.prototype.color = function(color){
this.style.backgroundColor = color;
}
let tab1 = document.querySelector(".tab1");
// Father.prototype.hide.call(tab1);
// console.log(tab1);
// function Tab(el,fun){
// this.tab = document.querySelector(el);
// this.links = this.tab.querySelectorAll("a");
// this.section = this.tab.querySelectorAll("section");
// this.callback = fun;
// // console.log(this);
// }
// function Tab(el,link="a",con="section",fun=null){
// this.tab = document.querySelector(el);
// this.links = this.tab.querySelectorAll(link);
// this.section = this.tab.querySelectorAll(con);
// this.callback = fun;
// console.log(this);
// }
function Tab(args){
args = Object.assign({el:null,link:"a",section:"section",callback:null},args);
this.tab = document.querySelector(args["el"]);
this.links = this.tab.querySelectorAll(args["link"]);
this.section = this.tab.querySelectorAll(args["section"]);
this.callback = args["callback"];
console.log(this);
}
extend(Tab,Father);
Tab.prototype.run = function(){
this.reset();
this.bindEvent();
this.action(0);
}
Tab.prototype.bindEvent = function(){
// console.log('111');
// console.log(this.tab);
this.links.forEach((element,index) => {
// console.log(element);
element.addEventListener("click",()=>{
// console.log(this.links);
// console.log(this); //指向当前对象
this.reset();
this.action(index);
// this.links.style.backgroundColor = "#e67e22";
if(this.callback){
this.callback()
}
})
});
}
Tab.prototype.reset = function(){
this.links.forEach((element,index)=>{
// element.style.backgroundColor = "#95a5a6";
this.color.call(this.links[index],"#95a5a6");
this.hide.call(this.section[index]);
})
this.section.forEach((element,index)=>{
element.style.display = "none"
})
}
Tab.prototype.action = function(index){
// console.log(111);
// console.log(index);
// this.links[index].style.backgroundColor = "#e67e22";
this.color.call(this.links[index],"#e67e22");
// this.section[index].style.display = "block"
// this.section[index].show(); //Dom元素无法直接使用父类的show方法
// console.log(this.show); //show方法
this.show.call(this.section[index]) //show方法里的this绑定到this.section[index]上
//show方法中的内容 this.style.display = "block"
}
// new Tab(".tab1").run();
// new Tab(".tab2","span","div").run();
new Tab({el:".tab1"}).run();
new Tab({
el:".tab2",
link:"span",
section:"div",
callback:function() {
console.log("这是回调函数");
}
}).run();
// function B(){
// this.name = "李四"
// }
// B.prototype.b = function(){
// console.log(this.name);
// }
// let E = {
// name:"王麻子"
// }
// function A(name){
// this.name = name;
// }
// extend(A,B);
// A.prototype.a = function(){
// // console.log(this.name + "的a方法");
// // this.b.call(this)
// this.b.call(E); //有了继承关系，就可以使用父类的d方法
// //执行该函数时，会把对象的this.b的this绑定到对象E上
// }
// new A("张三").a();
// function C(){
// console.log(this.name + "555"); //this指向window
// }
// let D = {
// name:"D",
// d:function(){
// console.log(this); //指向该对象
// console.log();
// }
// }
// D.d();
// C();//执行函数时，this指向window
// C.call(D); //执行该函数时，this的指向绑定到了D对象
</script>
</html>
网友评论