2. 程式人生 > >JS學習筆記 - 面向物件 - 選項卡 （普通選項卡改寫）

JS學習筆記 - 面向物件 - 選項卡 （普通選項卡改寫）

阿新 • • 發佈：2018-12-29

 

選項卡3

<script>
window.onload=function ()
{
    new TabSwitch('div1');
};

function TabSwitch(id) // TabSwitch 是 id 的 物件？？
{
    // var oDiv=document.getElementById('div1');
    var oDiv=document.getElementById(id);
    
    this.aBtn=oDiv.getElementsByTagName('input'); // 變數 => 屬性
    this
 
.aDiv=oDiv.getElementsByTagName('div');  
    //去除了全域性變數 var aBtn = null; var aDiv = null; 
    // 把aBtn / aDiv 變成了 TabSwitch函式的 屬性。
    
    for(var i=0;i<this.aBtn.length;i++)
    {
        this.aBtn[i].index=i;

        this.aBtn[i].onclick = this.fnClick;   
        // fnClick 寫成 this.fnClick 
        //
 
（這裡不再是函數了，是 TabSwitch的方法，所以要這樣寫）
    }
};

//function fnClick(){}; =>  TabSwitch.prototype.fnClick=function (){};
// 函式 => 方法

TabSwitch.prototype.fnClick=function ()  
// 給TabSwitch 新增 fnClick 這個方法
{
    for(var i=0;i<this.aBtn.length;i++)   // aBtn.length => this.aBtn.length
    {
        this.aBtn[i].className
 
=''
        this.aDiv[i].style.display='none';
    }
    oBtn.className='active';
    this.aDiv[oBtn.index].style.display='block';
}
</script>

 

選項卡2 

<script>
var aBtn=null;  // 全域性變數，window.onload 和 fnClick 都可以用
var aDiv=null;

window.onload=function ()
{
    var oDiv=document.getElementById('div1');
    aBtn=oDiv.getElementsByTagName('input');   
    //這裡獲取變數的內容，能在下面fnClick函式裡識別？？
    
    aDiv=oDiv.getElementsByTagName('div');
    
    for(var i=0;i<aBtn.length;i++)
    {
        aBtn[i].index=i;
        aBtn[i].onclick=fnClick;
    }
};

function fnClick()
{
    for(var i=0;i<aBtn.length;i++)
    {
        aBtn[i].className=''
        aDiv[i].style.display='none';
    }
    this.className='active';
    aDiv[this.index].style.display='block';
}
</script>

 

相關推薦

JS學習筆記 - 面向物件 - 選項卡 （普通選項卡改寫）

  選項卡3 <script> window.onload=function () { new TabSwitch('div1'); }; function TabSwitch(id) // TabSwitch 是 id 的 物件？？ { // var oDi

JS學習筆記 - 面向物件

  類、物件類：模子物件：產品（成品） 蛋糕（物件） 模子（類） Array 類 arr 物件 Array.push(); 錯 arr.push(); 對 new arr(); 錯 原型prototype 是加到類上面，而不是物件。 混合方式構造物件：方法都是相同的，屬性都是不同的

JS學習筆記 - 面向物件 - 原型

    <script> var arr1 = new Array(12, 55, 34, 78, 676); var arr2 = new Array(12, 33, 1) Array.prototype.sum = function() //理

JavaScript高階程式設計學習筆記--面向物件的程式設計（二）-- 繼承

go學習筆記-面向物件（Methods, Interfaces）

面向物件（Methods, Interfaces） Method method是附屬在一個給定的型別上的，他的語法和函式的宣告語法幾乎一樣，只是在func後面增加了一個receiver(也就是method所依從的主體)。 語法 func (r ReceiverType) funcName(param

Java第十天學習筆記~面向物件（介面應用、多型）

介面的應用 暴露的規則   使用規則   實現規則 這些裝置和電腦的耦合性降低了 interface USB //暴露的 規則 { public void open(); public void close(); } class BookPC

scala學習筆記-面向物件程式設計之Trait

將trait作為介面使用 1 // Scala中的Triat是一種特殊的概念 2 // 首先我們可以將Trait作為介面來使用，此時的Triat就與Java中的介面非常類似 3 // 在triat中可以定義抽象方法，就與抽象類中的抽象方法一樣，只要不給出方法的具體實現即可 4

JS學習筆記 Date物件及定時器操作

1.Date物件基本使用 <script> // 1. 宣告日期物件 var date = new Date(); // console.log(date); console.log(date.getDate()); // 日 console

C#學習筆記-面向物件基礎-多型

絕對路徑與相對路徑 相對路徑：相對於程式的路徑，儘量使用這個路徑。 File與Filestream #List 泛型集合 ##宣告方式 List listname = new List(); 名稱空間是 System.Collections ##陣列與集合之間的

C#學習筆記-面向物件基礎-繼承

名稱空間 namespace 解決類的重名問題。可以看做的是類的“資料夾”。 如果名稱空間缺失，可以選中類，用快捷鍵 alt+shift+F10，可以匯入名稱空間。 在一個專案中引用另一個專案的類 新增引用 引用名稱空間 值型別與引用型別

C# 學習筆記-面向物件基礎語法

面向物件的概念 面向過程：面向的是完成這件事的過程，強調的是完成這件事的動作； 把大象塞進冰箱裡： 1、開啟冰箱； 2、把大象塞進去； 3、關閉冰箱門。 如果我們用面向過程的思想來解決這件事兒，當執行這件事的人不同的時候，我們需要為每個不同的人量身定做解決事情的方法。

python學習筆記第十一節（叠代和其他）

技術分享 img 余數 商品列表 步長 取數 sorted函數 學習 四舍五入 yiled 面相過程編程 造好內容，統一發給下面 上面這個是傻瓜版 內置函數 print(divmod(10,3)) 將10除以3，顯示商和余數 enumerate函數，顯示元素及它

Java面向物件模板方法（溫習final、abstract）

 /*  * 當代碼完成優化後,就可以解決這類問題  * 這種方式就是模板方法:  *     在定義功能時,功能一部分是確定的,但有一部分是不確定的,而確定的部分在使用不確定的部分,  * 那麼這時就將不確定的部分

面向物件模型分析（繼承，多型）

class是一種特殊的struct 在記憶體中 class 依舊可以看做變數的集合 class 中的成員函式和成員變數是分開存放的 每個物件有獨立的成員變數 所有物件共享類中的成員函式

MyBatis學習筆記之二--關聯關係（一對一和一對多）

首先給大家推薦幾個網頁： http://blog.csdn.net/isea533/article/category/2092001 沒事看看 - MyBatis工具：www.mybatis.tk http://www.mybatis.org/mybatis-3/zh/gettin

用JAVA面向物件寫計算器（且避免無效輸入）

先放目錄結構   Operation類中封裝了a,b兩個運算數，以及得到運算結果的方法 package jisuanqi; public class Operation { private double a; private double b; public do

面向物件 引數傳遞 （方法 -- 構造方法--過載）

今天學習了面向物件的程式設計思想，首先 要來說一下 類的定義：    1.若干具有相同屬性和行為的群體或抽象    2.類是建立物件的模板    3.類由兩部分組成：屬性和行為 面向物件的程式設計思想：   對問題進行分析，定義物件模型（類），然後根據模型創造物件，使用物件

【Unity 3D】學習筆記十：GUI Skin（圖形使用者介面面板）

Unity 學習筆記十 學習資料：《Unity 3D遊戲開發》 宣雨鬆 在這之前的學習的大部分控制元件用來開發遊戲還是太簡陋，為了讓遊戲更具娛樂性和美觀，所以我們就需要學習GUI Skin空間來為遊戲新增色彩。 首先在Project檢視中點選create---->

JS學習筆記（物件基礎操作）

建構函式寫法一： function Dog(name, age, dogFriends) { // 1.1 屬性 this.name = name; this.age = age; this.dogFriends = dogFri

面向物件的程式設計（1)——簡明python教程學習筆記

本文大量內容來源於沈老師的簡明python教程，其中夾雜部分個人的理解如有偏頗之處還望海涵。 一.簡介 到目前為止，在我們的程式中，我們都是根據操作資料的函式或語句塊來設計程式的。這被稱為面向過程的程式設計。 還有一種把資料和功能結合起來，用稱為物