在现在的网页中,选项卡(我自己这样子叫)是非常普遍的,也是比较基础,学了原型实现选项卡也挺久了,最近在学ES6,学了用类实现选项卡,今天就在此做个总结,别的废话也不多说。
以“貌”说这货
外貌——还好,长得挺帅
(自己理解的)选项卡:就是通过点击头部切换内容的货。
怎么得到这货
html代码
<div id="div1">
<input type="button" value="出国" class="active">
<input type="button" value="留学">
<input type="button" value="旅游">
<div style=‘display: block‘>123</div>
<div>456</div>
<div>789</div>
</div>
css代码
#div1 div{
width: 200px;
height: 200px;
border: 1px solid #ccc;
display: none;
}
.active {
background: orange;
}
js代码
入门
window.onload=function ()
{
var oDiv=document.getElementById(‘div1‘);
var aBtn=oDiv.getElementsByTagName(‘input‘);
var aDiv=oDiv.getElementsByTagName(‘div‘);
for(var i=0;i<aBtn.length;i++)
{
aBtn[i].index=i;
aBtn[i].onclick=function ()
{
for(var i=0;i<aBtn.length;i++)
{
aBtn[i].className=‘‘;
aDiv[i].style.display=‘none‘;
}
this.className=‘active‘;
//alert(this.index);
aDiv[this.index].style.display=‘block‘;
};
}
};
面向对象
window.onload = function (){
new tab(‘div1‘);
}
用原型实现
function tab(id)
{
var oDiv = document.getElementById(id);
this.aBtn = oDiv.getElementsTagName(‘input‘);
this.aDiv = oDiv.getElemetsTagName(‘div‘);
var _this = this;
for(var i=0;i<this.aBtn.length;i++){
this.aBtn[i].index = i;
this.aDiv[i].addEventListener(‘click‘,function(){
_this.tabSwitch(this);
},false)
}
}
tab.prototype.tabSwitch = function (oBtn){
for(var i=0;i<this.aBtn.length;i++)
{
this.aBtn[i].className = ‘‘;
this.aDiv[i].style.display = ‘none‘;
}
oBtn.className = ‘avtive‘;
this.aDiv[oBtn.index].style.display = ‘block‘;
}
用ES6引进的类class实现
class tab {
constructor(id) {
var oDiv = document.getElementById(id);
this.aBtn = oDiv.getElementsByTagName(‘input‘);
this.aDiv = oDiv.getElementsByTagName(‘div‘);
var _this = this;
for (var i = 0; i < this.aBtn.length; i++) {
this.aBtn[i].index = i;
this.aBtn[i].addEventListener(‘click‘, function () {
_this.tabSwitch(this);
}, false)
}
}
tabSwitch(oBtn) {
for (var i = 0; i < this.aBtn.length; i++) {
this.aBtn[i].className = ‘‘;
this.aDiv[i].style.display = ‘none‘;
}
oBtn.className = ‘active‘;
this.aDiv[oBtn.index].style.display = ‘block‘;
}
}
关于面向对象(自己的理解)
1.何为对象?
对象,就是拥有属性和方法的集合。
2.何为面向对象?
根据面向对象的三大特征:
多态:多种状态;
封装:把功能封装成工具,不用过多的理会怎么实现的,会使用就行;
继承:跟css继承性类似,继承父的属性和方法。
3.js里的面对对象与Java中的面对对象的区别
js是基于原型的面对对象,而Java是类的面向对象
4.怎么理解js里的原型?
原型可以用css里class去类似理解,就是一组元素通过原型实现相同属性、方法的。
- 用原型写面向对象
function User(name, pass) { this.name=name; this.pass=pass; }; User.prototype.showName=function() { alert(this.name); } User.prototype.showPass=function(){ alert(this.pass); } function VipUser(name, pass, level){ User.call(this, name, pass); this.level = level; } VipUser.prototype=new User(); VipUser.prototype.constructor=VipUser; /*for(var i in User.prototype) { VipUser[i].prototype = User[i].prototype; }*/ VipUser.prototype.showLevel=function(){ alert(this.level); };
用类写面向对象
class person { constructor(name, age){ this.name = name; this.age = age; } showName(){ alert(this.name); } showAge(){ alert(this.age); } } class vip extends person { constructor(name,age,sex) { super(name, age); this.sex = sex; } showSex(){ alert(this.sex); } }
原文地址:https://www.cnblogs.com/Jomsou/p/9161803.html
时间: 2024-11-06 22:43:24