前端开发者| 前端开发要注意的浏览器兼容性 |
| 前端开发浏览器兼容集合 |
| 前端开发那个浏览器兼容性好 |
面向对象的选项卡 原则 先写出普通的写法，然后改成面向对象写法 普通方法变型
尽量不要出现函数嵌套函数 可以有全局变量 把onload中不是赋值的语句放到单独函数中
改成面向对象 全局变量就是属性 函数就是方法 Onload中创建对象 改this指向问题
<style>
div1 div,
#div2 div {
width: 200px;
height: 200px;
border: 1px #000 solid;
display: none;
}
.active {
background: red;
}
</style>
<script>
var oParent = null
var aInput = null
var aDiv = null
window.onload = function() {
var oParent = document.getElementById(‘div1’)
var aInput = oParent.getElementsByTagName(‘input’)
var aDiv = oParent.getElementsByTagName(‘div’)
init()
}
function init() {
for (var i = 0; i < aInput.length; i++) {
aInput[i].index = i
aInput[i].onclick = change
}
}
function change() {
for (var i = 0; i < aInput.length; i++) {
aInput[i].className = ”
aDiv[i].style.display = ‘none’
}
this.className = ‘active’
aDiv[this.index].style.display = ‘block’
}
</script>
<div id=”div1″>
<input class=”active” type=”button” value=”1″ />
<input type=”button” value=”2″ /> <input type=”button” value=”3″ />
<div style=”display:block”>11111</div>
<div>22222</div>
<div>33333</div>
</div>
这个是我们的传统写法 下面是我们改成面向对象的写法：
<style>
div1 div,
#div2 div {
width: 200px;
height: 200px;
border: 1px #000 solid;
display: none;
}
.active {
background: red;
}
</style>
<body>
<script>
window.onload = function() {
var t1 = new Tab(‘div1’)
t1.init()
}
function Tab(id) {
this.oParent = document.getElementById(id)
this.aInput = this.oParent.getElementsByTagName(‘input’)
this.aDiv = this.oParent.getElementsByTagName(‘div’)
this.iNow = 0
}
Tab.prototype.init = function() {
var This = this
for (var i = 0; i < this.aInput.length; i++) {
this.aInput[i].index = i
this.aInput[i].onclick = function() {
This.change(this)
}
}
}
Tab.prototype.change = function(obj) {
for (var i = 0; i < this.aInput.length; i++) {
this.aInput[i].className = ”
this.aDiv[i].style.display = ‘none’
}
obj.className = ‘active’
this.aDiv[obj.index].style.display = ‘block’
}
</script>
<div id=”div1″>
<input class=”active” type=”button” value=”1″ />
<input type=”button” value=”2″ /> <input type=”button” value=”3″ />
<div style=”display:block”>11111</div>
<div>22222</div>
<div>33333</div>
</div>
看代码的话，简单的功能可能用面向对象会觉得还复杂些。
如果说我们页面中有多个选项卡，第二选项卡多了一个自动播放的功能，，
那么我们可以这样添加
<style>
div1 div,
#div2 div {
width: 200px;
height: 200px;
border: 1px #000 solid;
display: none;
}
.active {
background: red;
}
</style>
<body>
<script>
window.onload = function() {
var t1 = new Tab(‘div1’)
t1.init()
var t2 = new Tab(‘div2’)
t2.init()
t2.autoPlay()
}
function Tab(id) {
this.oParent = document.getElementById(id)
this.aInput = this.oParent.getElementsByTagName(‘input’)
this.aDiv = this.oParent.getElementsByTagName(‘div’)
this.iNow = 0
}
Tab.prototype.init = function() {
var This = this
for (var i = 0; i < this.aInput.length; i++) {
this.aInput[i].index = i
this.aInput[i].onclick = function() {
This.change(this)
}
}
}
Tab.prototype.change = function(obj) {
for (var i = 0; i < this.aInput.length; i++) {
this.aInput[i].className = ”
this.aDiv[i].style.display = ‘none’
}
obj.className = ‘active’
this.aDiv[obj.index].style.display = ‘block’
}
Tab.prototype.autoPlay = function() {
var This = this
setInterval(function() {
if (This.iNow == This.aInput.length – 1) {
This.iNow = 0
} else {
This.iNow++
}
for (var i = 0; i < This.aInput.length; i++) {
This.aInput[i].className = ”
This.aDiv[i].style.display = ‘none’
}
This.aInput[This.iNow].className = ‘active’
This.aDiv[This.iNow].style.display = ‘block’
}, 2000)
}
</script>
<div id=”div1″>
<input class=”active” type=”button” value=”1″ />
<input type=”button” value=”2″ /> <input type=”button” value=”3″ />
<div style=”display:block”>11111</div>
<div>22222</div>
<div>33333</div>
</div>
<div id=”div2″>
<input class=”active” type=”button” value=”1″ />
<input type=”button” value=”2″ /> <input type=”button” value=”3″ />
<input type=”button” value=”4″ />
<div style=”display:block”>11111</div>
<div>22222</div>
<div>33333</div>
<div>44444</div>
</div>
</body>
这样看就觉得好用多了
</body>
| 浏览器 前端开发 |
| 前端开发 浏览器 编辑 |
| 前端开发 浏览器兼容性 |
» 本文来自：前端开发者 » 《前端开发用面向对象的方法写选项卡功能》
» 本文链接地址：https://www.rokub.com/6552.html
» 您也可以订阅本站：https://www.rokub.com
评论前必须登录！
注册