学习javascript面向对象 实例讲解面向对象选项卡_javascript技巧
程序员文章站
2022-04-17 15:33:52
...
本文实例讲解了最简单的面向对象选项卡实现方法,分享给大家供大家参考,具体内容如下
效果图:
1、功能说明
点击三个按钮分别显示对应的选项卡
2、html代码说明
- 第一张选项卡
- 第二张选项卡
- 第三张选项卡
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
希望本文所述对大家学习javascript面向对象有所帮助。
推荐阅读
-
JS面向对象编程浅析_javascript技巧
-
javascript 面向对象的经典实例代码_js面向对象
-
JavaScript 设计模式学习 Singleton_js面向对象
-
探讨javascript是不是面向对象的语言_javascript技巧
-
利用javascript的面向对象的特性实现限制试用期_javascript技巧
-
实例讲解PHP面向对象之多态_php技巧
-
面向对象设计模式的核心法则_javascript技巧
-
javascript中的对象创建 实例附注释_js面向对象
-
javascript 模式设计之工厂模式学习心得_js面向对象
-
JavaScript函数、闭包、原型、面向对象学习笔记