继承实现tab以及extend.js

<div class="tab1">
    <div class="hd">
        <span href="javascript:;">标签1</span>
        <span href="javascript:;">标签2</span>
    </div>
    <div class="bd">
        <div>内容1</div>
        <div>
            <p>内容233333333333333</p>
            <p>内容233333333333333</p>
            <p>内容233333333333333</p>
            <p>内容233333333333333</p>
            <p>内容233333333333333</p>
            <p>内容233333333333333</p>
            <p>内容233333333333333</p>
            <p>内容233333333333333</p>
            <p>内容233333333333333</p>
            <p>内容233333333333333</p>
            <p>内容233333333333333</p>
            <p>内容233333333333333</p>
            <p>内容233333333333333</p>
            <p>内容233333333333333</p>
            <p>内容233333333333333</p>
            <p>内容233333333333333</p>
            <p>内容233333333333333</p>
            <p>内容233333333333333</p>
            <p>内容233333333333333</p>
            <p>内容233333333333333</p>
            <p>内容233333333333333</p>
            <p>内容233333333333333</p>
        </div>
    </div>
</div>
</body>
<script src="./js/extend.js"></script>
<script>
new Tab({
    el:".tab1",
    link: ".hd span",
    section: ".bd div",
}).run();
</script>

.tab1{
    width: 50%;
    position: relative;
  }

.tab1 .hd{
  display: flex;
  height: 50px;
  align-items: center;
}

.tab1 .hd span{
  background: #95a5a6;
  /* margin-right: px; */
  padding: 10px 20px;
  border: solid 1px #333;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

.tab1 .hd span.active{
  background: #e67e22;
}
.bd{position: relative;}
  .bd div{
  width: auto;
  background: #f1c40f;
  font-size: 1rem;
  /* display: none; */
  opacity: 0;
  visibility: hidden;
  position:absolute;
  transition: opacity .25s,visibility .25s;
}

.bd div.active{
  /* display: block; */
  opacity: 1;
  visibility: visible;
}

.bd div:nth-child(even),.bd div:nth-child(even) {
  background: #27ae60;
}            

// 继承关系
function extend(child,parent){
    child.prototype = Object.create(parent.prototype);
    child.prototype.constructor = child;
}
function Parent(){};
Parent.prototype.show = function(){
    this.classList.add("active");
}
Parent.prototype.hide = function(){
    this.classList.remove("active");
}
// 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"]);
    // console.log(this.tab);
    this.links = this.tab.querySelectorAll(args["link"]);
    this.section = this.tab.querySelectorAll(args["section"]);
    // console.log(this.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.links[index]);
        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.links[index]);
    this.show.call(this.section[index]);
}
Tab.prototype.bindEvent = function(){
    this.links.forEach((element,index) => {
        // console.log(this);
        // element.addEventListener("click",function(){
        element.addEventListener("mouseover",()=>{
            // 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();
            };
        });
    });
}