1. <!--
    2.  * @Description: Tab使用继承实现 模块的显示和隐藏 以及类型变换
    3.  * @Author: Harry
    4.  * @Date: 2021-10-15 09:53:14
    5.  * @Url: https://u.mr90.top
    6.  * @github: https://github.com/rr210
    7.  * @LastEditTime: 2021-10-15 11:03:20
    8.  * @LastEditors: Harry
    9. -->
    10. <!DOCTYPE html>
    11. <html lang="en">
    13. <head>
    14.   <meta charset="UTF-8">
    15.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    16.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    17.   <title>继承实现状态的改变</title>
    18. </head>
    19. <style>
    20.   * {
    21.     padding: 0;
    22.     margin: 0;
    23.     box-sizing: border-box;
    24.   }
    26.   a,span {
    27.     text-decoration: none;
    28.     color: #fff;
    29.     width: 100px;
    30.     height: 50px;
    31.     line-height: 50px;
    32.     text-align: center;
    33.     font-size: 18px;
    34.     font-weight: 500;
    35.   }
    37.   body {
    38.     background-color: #ccc;
    39.   }
    41.   main {
    42.     display: inline-block;
    43.     width: 40%;
    44.     margin: 20px;
    45.   }
    47.   nav {
    48.     display: flex;
    49.     justify-content: center;
    50.     align-items: center;
    51.   }
    53.   main nav a:nth-child(1) {
    54.     background-color: orange;
    55.   }
    57.   main nav a:nth-child(2) {
    58.     background-color: #888;
    59.   }
    61.   section {
    62.     width: 100%;
    63.     height: 200px;
    64.     font-size: 40px;
    65.     font-weight: 500;
    66.     color: #000;
    67.     border-radius: 20px;
    68.     padding: 20px;
    69.     box-shadow: 0 0 10px #999;
    70.   }
    72.   section {
    73.     margin: 20px 0;
    74.     background-color: rgb(228, 238, 83);
    75.   }
    77.   section+section {
    78.     display: none;
    79.     background-color: rgb(20, 172, 28);
    80.   }
    81. </style>
    83. <body>
    84.   <main class="tab1">
    85.     <nav>
    86.       <span href="javascript:;">点击按钮1</span>
    87.       <span href="javascript:;">点击按钮2</span>
    88.     </nav>
    89.     <section>1</section>
    90.     <section>2</section>
    91.   </main>
    92.   <main class="tab2">
    93.     <nav>
    94.       <a href="javascript:;">点击按钮1</a>
    95.       <a href="javascript:;">点击按钮2</a>
    96.     </nav>
    97.     <section>1</section>
    98.     <section>2</section>
    99.   </main>
    100. </body>
    101. <script>
    102.   // 使用继承实现类型的转化
    103.   // 先写一个继承的方法
    104.   function _extend(sub, sup) {
    105.     sub.prototype = Object.create(sup.prototype)
    106.     Object.defineProperty(sub, 'constructor', {
    107.       value: sub,
    108.       enumerable: false
    109.     })
    110.   }
    111.   // 定义一个变换的函数
    112.   function Animation() { }
    113.   // 实现元素的显示和隐藏
    114.   Animation.prototype.show = function () {
    115.     this.style.display = 'block'
    116.   }
    117.   Animation.prototype.hide = function () {
    118.     this.style.display = 'none'
    119.   }
    120.   // 实现元素背景的替换
    121.   Animation.prototype.backgroundColor = function (color) {
    122.     this.style.backgroundColor = color
    123.   }
    124.   _extend(Tab, Animation)
    125.   function Tab(params) {
    126.     let args = Object.assign({ el: null, section: 'section', link: 'a', callback: null }, params)
    127.     this.tab = document.querySelector(args['el'])
    128.     this.links = this.tab.querySelectorAll(args['link'])
    129.     this.sections = this.tab.querySelectorAll(args['section'])
    130.     this.callback = args['callback']
    131.   }
    132.   // 当实例创建之后需要开始启动 并且获取
    133.   Tab.prototype.run = function (i) {
    134.     this.reset()
    135.     this.action(i)
    136.     this.bindEvent()
    137.   }
    138.   // 绑定一个事件
    139.   Tab.prototype.bindEvent = function () {
    140.     this.links.forEach((el, i) => {
    141.       el.addEventListener('click', () => {
    142.         // 调用action函数之前先进行重置
    143.         this.reset()
    144.         this.action(i)
    145.         if (this.callback) this.callback()
    146.       })
    147.     });
    148.   }
    149.   Tab.prototype.reset = function () {
    150.     this.links.forEach((el, i) => {
    151.       this.backgroundColor.call(el, '#888')
    152.       this.hide.call(this.sections[i])
    153.     })
    154.   }
    155.   // 绑定一个事件执行函数
    156.   Tab.prototype.action = function (i) {
    157.     this.backgroundColor.call(this.links[i], '#ffa500')
    158.     this.show.call(this.sections[i])
    159.   }
    160.   new Tab({ el: ".tab1", link: 'span', callback: () => { console.log('测试回调') } }).run(0)
    161.   new Tab({ el: ".tab2", callback: () => { console.log('测试回调') }, link: "a" }).run(1)
    163. </script>
    166. </html>