这篇文章主要介绍了面向对象选项卡实现方法,帮助大家更好地学习 javascript 面向对象,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
效果图:
1、功能说明
点击三个按钮分别显示对应的选项卡 2、html 代码说明
- <div class="box" id="box">
- <ul class="list">
- <li class="in_active">
- 第一张选项卡
- </li>
- <li class="in">
- 第二张选项卡
- </li>
- <li class="in">
- 第三张选项卡
- </li>
- </ul>
- <nav class="conList">
- <a class="con_active" href="javascript:;">
- 第一个控制按钮
- </a>
- <a class="con" href="javascript:;">
- 第二个控制按钮
- </a>
- <a class="con" href="javascript:;">
- 第三个控制按钮
- </a>
- </nav>
- </div>
3、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;
- }
4、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);
希望本文所述对大家学习 javascript 面向对象有所帮助。
来源: http://www.phperz.com/article/17/0408/267772.html