ES5,ES6面向對象+面向過程+jQ 四種選項卡實現

html結構:css

<input type="button" class="yellow" value="按鈕1">
    <input type="button" value="按鈕2" class="">
    <input type="button" value="按鈕3" class="">
    <div style="display: block;">內容1</div>
    <div style="display: none;">內容2</div>
    <div style="display: none;">內容3</div>

複製代碼

css樣式:html

div {
        width: 200px;
        height: 200px;
        background: red;
        display: none;
    }

  .yellow {
           background: yellow;
         } 

複製代碼

js交互邏輯:bash

//面向對象選項卡 ES5
function myTab(){
    this.inputs=document.querySelectorAll('input');
    this.divs=document.querySelectorAll('div');
};
myTab.prototype.init=function(){
    var that=this;
    for(var i=0;i<this.inputs.length;i++){
        this.inputs[i].index=i;
        this.inputs[i].onclick=function(){
            for(var i=0;i<that.inputs.length;i++){
                that.inputs[i].className='';
                that.divs[i].style.display='none';
            }
            this.className='yellow';
            that.divs[this.index].style.display='block';

        }
    }
};
var d=new myTab();
d.init();
//ES5結束
//面向對象選項卡  ES6 class類
class myTab{
    constructor(){
        this.inputs=document.querySelectorAll('input');
        this.divs=document.querySelectorAll('div');
    };
    init(){
        var that=this;
        for(var i=0;i<this.inputs.length;i++){
            this.inputs[i].index=i;
            this.inputs[i].onclick=function(){
                for(var i=0;i<that.inputs.length;i++){
                    that.inputs[i].className='';
                    that.divs[i].style.display='none';
                }
                this.className='yellow';
                that.divs[this.index].style.display='block';

            }
        }
    }
};
var d=new myTab();
d.init();
//ES6結束
//面向過程選項卡
var inputs=document.querySelectorAll('input');
var divs=document.querySelectorAll('div');
for(var i=0;i<inputs.length;i++){
    inputs[i].index=i;
    inputs[i].onclick=function(){
        for(var i=0;i<inputs.length;i++){
            inputs[i].className='';
            divs[i].style.display='none';
        }
        this.className='yellow';
        divs[this.index].style.display='block';
    }
}

//jQ選項卡 簡單操做
var inputs=$('input');
inputs.click(function(){
//this=>原生對象
//console.log(this);
inputs.removeClass('yellow');
$(this).addClass('yellow');
// index() 從一堆的元素中找到指定元素所處的位置
//console.log(inputs.index($(this)));
$('div').hide();
$('div').eq((inputs.index($(this)))).show();
});

//jQ選項卡 複雜操做,原生的思惟
$('input').each(function(index,item){
    $('input')[index].setAttribute('id',index);
    $(this).click(function(){
//全部的
$('input').each(function(index,item){
    $('input').eq(index).removeClass('yellow');
    $('div').eq(index).hide();
});
//當前的
$(this).addClass('yellow');
$('div').eq(index).show();
})
});
//data屬性使用
$('input').each(function(index,item){
    $(item).data('index',index);
    $(item).click(function(){
        var index=$(item).data('index');
        $('input').removeClass('yellow')
        $(this).addClass('yellow');
        $('div').hide();
        $('div').eq(index).show();
    })
});
//用純jQ的思惟寫選項卡:
$('input').click(function(){
    $('input').removeClass('yellow');
    $(this).addClass('yellow');
    $('div').hide();
//eq獲取指定下標的jQ對象
$('div').eq(($('input').index($(this)))).show();

});

複製代碼

寫代碼不是寫代碼的自己,而是把你的思惟方式表達出來!ide

相關文章
相關標籤/搜索