オブジェクト指向のタブ

<！DOCTYPE HTML> 
<HTML LANG = "EN"> 
<HEAD> 
    <メタ文字コード= "UTF-8"> 
    <メタ名= "ビューポート"コンテンツ= "幅=装置幅、初期の規模= 1.0"> 
    <メタHTTP-当量= "X-UA-互換"コンテンツ= "IE =縁"> 
    <タイトル>ドキュメント</タイトル> 
    <スタイル> 
        .cont {幅400ピクセル、高さ300ピクセル;ボーダー：固体1ピクセルブラック;マージン： 30px自動;} 
        .cont UL {マージン： 0;パディング：0;リストスタイル：なし;ディスプレイ：曲がる;高さ：40ピクセル、行の高さ：40ピクセル、テキスト整列：センター;背景：#eee; BORDER- 底固体1ピクセルブラック;} 
        .cont李{フレックス： 1; BORDER- 右：固体1ピクセルブラック;} 
        .cont李。アクティブ{背景：赤} 

        ■はPの{マージン： 0;高さ：259px;ディスプレイ：なし} 
        ■はのp.active {表示：ブロック;} 
        ■はpを：n番目 -child（1 ）{背景：＃0A0} 
        ■はpを：n番目 -child（2 ）{背景：＃ AA0} 
        ■はpを：n番目 -child（3 ）{背景：＃1 0AA}
     </スタイル> 
</ head> 
<body> 
    <DIV CLASS = "CONT"> 
        <UL> <LIクラス= "アクティブ"> 1 < / LI> <LI> 2 </ LI> <LI> 3 </ LI> </ UL> 
        <DIV CLASS = "ボックス"> 
            <Pクラス= "アクティブ">内容1内容1内容1内容1内容1内容1 </ P> 
            <P>内容2 </ P> 
            <P>内容3333333333 </ P> 
        </ DIV> 
    </ DIV> 
</ BODY> 
<SCRIPT> // OOA：分析//

    
         タブ：対応するコンテンツを切り替え、ボタンをクリックします
    //      1. [要素
    //      2.結合事象
    //      3要素を見つけるためにインデックスをクリックして
    、//      インデックス表示内容

    // デザイン：OOD 
    //は、タブ（）{機能
    //      // 1.選択された要素が
    //      // 2結合事象が
    // } 
    // Tab.prototype.init =関数（）{ 
    //      //が良好な結合は、結合を開始します後に、トリガされる
    //          //インデックス3.エレメント取得
    //          //インデックス表示内容
    // } 
    // Tab.prototype.display =関数（）{ 
    //      //は、画像を表示します
    / / } 

    // OOPの：プログラミング（充填コード）
    関数Na'tab'al（）{
         // から選択される1要素
        これに.Li = document.querySelectorAll（ "CONT李。" ）;
         この .P = document.querySelectorAll（ "CONT P." ）;
         // 2.結合事象
        この.INIT （）; 
    } 
    Tab.prototype.init = 関数（）{
         VAR = この;
         // 結合の開始後、良好な結合が、トリガされる
        ため（VAR I = 0;私は< この .li.lengthを、Iは++ ） {
             これに.Li [I] .INDEX = I;
             これに.Li [I] = .onclick 機能（）{
                 // 3.インデックス見つける要素 
                = that.abc この .INDEXを; // インデックスをクリックする
                // 表示内容に応じて、4指標を
                that.display（）; 
            } 
        } 
    } 
    Tab.prototype。表示 = 関数（）{
         //は、画像を表示
        するための（VAR I = 0;私は< この .li.lengthを、Iは++ ）{
             これに.Li [I] .className = "" ;
             この .P [I] = .className " " ; 
        } 
        これに.Li [ この.abc] .className = "アクティブ" 。
        この .P [ この .abc] .className = "アクティブ" 。
    } 

    新しいタブ（）。

</スクリプト> 
</ HTML>
おすすめ
