<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                ??一站式輕松地調用各大LLM模型接口,支持GPT4、智譜、豆包、星火、月之暗面及文生圖、文生視頻 廣告
                ### 面對對象的選項卡 - 把面向過程的程序,改寫成面向對象的形式 - 原則:不能有函數套函數,但可以有全局變量 - 過程: - `onload`:構造函數 - 全局變量:屬性 - 函數:方法 - 改錯: - `this`、事件、閉包、傳參 - 對象與閉包 - 通過閉包傳遞 `this` - 代碼: ```HTML <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>面對對象的選項卡</title> <style> .div2 { width: 200px; height: 200px; margin-top: 20px; position: relative; } .div1 { width: 200px; height: 20px; position: absolute; top: 0px; } ul { margin: 0; padding: 0; display: block; background: rgb(157, 234, 253); float: left; position: absolute; display: none; width: 200px; height: 200px; } .ul { display: block; } a { display: block; float: left; width: 49px; height: 20px; background: rgb(7, 184, 253); border-right: 1px solid rgb(255, 0, 234); text-decoration: none; } .a { background: rgb(32, 108, 221); } </style> <script> // 封裝 getElementById 函數 function get(id) { return document.getElementById(id); } // 封裝 getElementsByTagName function gets(obj,tagName) { return obj.getElementsByTagName(tagName) } // onload 作為構造函數 window.onload = function () { new TabSwitch('tabS') } // 構造一個對象 function TabSwitch(id){ var oDiv = get(id); var _this = this; // 避免找不到 this // 全局變量作為屬性 this.aA = gets(oDiv,'a'); this.aUl = gets(oDiv,'ul'); // 顯示第一個元素 this.aUl[0].className = 'ul'; // 當鼠標覆蓋某個標簽時 顯示對應元素 for (var i = 0; i < this.aUl.length; i++) { this.aA[i].index = i; this.aA[i].onmouseover = function () { // 把當前this作為參數傳入,_this作為當前this調用直接傳入 _this.showTab(this); } } } // 函數作為方法 事件this作為參數傳入 TabSwitch.prototype.showTab = function (aA) { // console.log(this); // 當前this是調用方法的_this for (var i = 0; i < this.aA.length; i++) { this.aUl[i].className = ''; this.aA[i].className = ''; } this.aUl[aA.index].className = 'ul'; this.aA.className = 'a'; } </script> </head> <body> <div id="tabS"> <div class="div1"> <a href="javascript:;" id="a0">11</a> <a href="javascript:;" id="a1">22</a> <a href="javascript:;" id="a2">33</a> <a href="javascript:;" id="a3">44</a> </div> <div class="div2"> <ul> <li>1</li> </ul> <ul> <li>2</li> </ul> <ul> <li>3</li> </ul> <ul> <li>4</li> </ul> </div> </div> </body> </html> ```
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看