面向过程的实现方式
window.onload = function(){
var oDiv = document.getElementById('div1');
var oBtn = oDiv.getElementsByTagName('input');
var aDiv = oDiv.getElementsByTagName('div');
for(var i = 0;
i < oBtn.length;
i++){
oBtn[i].index = i //给元素添加自定义属性
oBtn[i].onclick = function(){
for(var i = 0;
i < oBtn.length;
i++){
oBtn[i].className = ''
aDiv[i].style.display = 'none'
}
this.className = 'active'
aDiv[this.index].style.display = 'block'
}
}
}改成面向对象方式
改写过程：1、不能让函数有嵌套，可以有全局变量
2、全局变量 改成 属性
3、函数 改成 方法
【JS实例|【JavaScript】用面向对象来实现选项卡实例】
推荐阅读
- c++|C++入门——类、对象、运算符重载
- 树莓派|树莓派小车教程(四)之——基本实现网页控制小车速度可调(同步执行)
- 软件研发|揭开JS无埋点技术的神秘面纱
- 软件研发|web移动端基础事件总结与应用
- leetcode|【JS】实现 strStr()
- vue|vue-cli项目的webpack打包优化
- python|Python可以比C++更快，你不信（）
- js|前端模糊查询当前列表
- js|jsonp跨域