你的位置:首页 > Java教程

[Java教程]javascript面向对象系列4——实例篇(最简单的面向对象选项卡)


【功能说明】

点击三个按钮分别显示对应的选项卡

 

【html代码说明】

<div id="box">  <ul >    <li >第一张选项卡</li>    <li >第二张选项卡</li>    <li >第三张选项卡</li>  </ul>  <nav >    <a href="javascript:;">第一个控制按钮</a>    <a href="javascript:;">第二个控制按钮</a>    <a href="javascript:;">第三个控制按钮</a>  </nav>  </div>

 

【css重点代码说明】

/*in为选项卡普通状态,默认不显示*/.in,.in_active{  display: none;  width: 600px;  height: 100px;  background: orange;  font-size: 50px;  line-height: 100px;  text-align: center;}/*in_active为选项卡选中状态,选中后显示*/.in_active{  display: block;}/*con为按钮普通状态,默认文字颜色为黑色*/.con,.con_active{  color: black;  background-color: orange;}/*con_active为按钮选中状态,选中后文字颜色为白色*/.con_active{  color: white;  }

 

【js代码说明】

function Tab(obj){  /*元素获取*/  //获取选项卡展示部分  this.oList = obj.getElementsByTagName('ul')[0];  this.aIn = this.oList.getElementsByTagName('li');  //获取选项卡控制部分  this.oConList = obj.getElementsByTagName('nav')[0];  this.aCon = this.oConList.getElementsByTagName('a');  /*变量设置*/  //选项卡张数  this.count = this.aIn.length;  //当前第几张  this.cur = 0;  var _this = this;  for(var i = 0; i < this.count; i++){    //设置索引    this.aCon[i].index = i;    //给按钮添加事件    this.aCon[i].onclick = function(){      _this.cur = this.index;      _this.switch();    }  }}Tab.prototype.switch = function(){  //去掉所有  for(var i = 0; i < this.count; i++){    this.aIn[i].className = 'in';    this.aCon[i].className = 'con';  }  //显示当前  this.aIn[this.cur].className = 'in_active';  this.aCon[this.cur].className = 'con_active';  }//获取选项卡元素var oBox = document.getElementById('box');//构造选项卡对象var tab1 = new Tab(oBox);

 

【效果展示】

 【源码查看】