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