JS基于面向对象实现的选项卡效果示例
作者:鬼畜十三 时间:2024-04-19 10:42:56
本文实例讲述了JS基于面向对象实现的选项卡效果。分享给大家供大家参考,具体如下:
中间过渡环节:把面向过程的程序,改写成面向对象的形式
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 input {background:#CCC;}
#div1 .active {background:yellow;}
#div1 div {width:200px; height:200px; background:#CCC; display:none;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
var oDiv=document.getElementById('div1');
var aBtn=oDiv.getElementsByTagName('input');
var aDiv=oDiv.getElementsByTagName('div');
var i=0;
for(i=0;i<aBtn.length;i++)
{
aBtn[i].index=i;
aBtn[i].onclick=function ()
{
for(i=0;i<aBtn.length;i++)
{
aBtn[i].className='';
aDiv[i].style.display='none';
}
this.className='active';
aDiv[this.index].style.display='block';
};
}
};
</script>
</head>
<body>
<div id="div1">
<input class="active" type="button" value="教育" />
<input type="button" value="财经" />
<input type="button" value="aaa" />
<div style="display:block;">1asdfasdfds</div>
<div>2xzcvxzcv</div>
<div>5332342345</div>
</div>
</body>
</html>
改写注意事项:
1.前提:所有代码必须包含在window.onload里面
2.去掉函数嵌套(window.onload里面嵌套的函数拎到window.onload外面去)
3.不能有函数嵌套,但可以有全局变量(比如onclick函数拎出去后,aBtn是window.onload函数里的私有变量,onclick函数不能用)
过程:
1.onload(初始化整个程序)→构造函数(初始化一个对象)
2.全局变量→属性
3.函数→方法
window.onload=function(){
var oTab=new TabSwitch("div1");
}
function TabSwitch(id)
{
var oDiv=document.getElementById(id);
this.aBtn=oDiv.getElementsByTagName('input');
this.aDiv=oDiv.getElementsByTagName('div');
var i=0;
var _this=this; //this是new出来的对象,即oTab
for(i=0;i<this.aBtn.length;i++)
{
this.aBtn[i].index=i;
this.aBtn[i].onclick=function(){
_this.tab(this); //通过参数的形式,将被点击的按钮传到下面去
};
}
};
TabSwitch.prototype.tab=function(oBtn){
for(i=0;i<this.aBtn.length;i++)
{
this.aBtn[i].className='';
this.aDiv[i].style.display='none';
}
oBtn.className='active'; //要被点击的按钮改变,而不是new出来的对象,所以这里不用this
this.aDiv[oBtn.index].style.display='block';
}
希望本文所述对大家JavaScript程序设计有所帮助。
标签:JS,面向对象,选项卡
0
投稿
猜你喜欢
Python使用文件操作实现一个XX信息管理系统的示例
2022-07-12 15:28:31
PHP substr 截取字符串出现乱码问题解决方法[utf8与gb2312]
2024-04-30 09:57:37
如何基于Python实现电子邮件的发送
2022-03-16 11:49:16
利用Python实现普通视频变成动漫视频
2023-02-05 05:13:59
python的Template使用指南
2023-10-14 01:30:58
Bootstrap表格和栅格分页实例详解
2024-04-10 13:51:05
Linux下Python获取IP地址的代码
2023-02-27 10:30:07
基于keras输出中间层结果的2种实现方式
2023-10-11 16:05:49
解决python replace函数替换无效问题
2022-05-20 18:51:57
Python打印输出数组中全部元素
2022-08-07 19:35:12
Python中DataFrame判断两列数据是否相等的方法
2023-12-09 10:17:37
Python读取二进制文件代码方法解析
2023-06-14 14:32:35
使用Python的PIL模块来进行图片对比
2022-04-28 19:18:36
nonebot插件之chatgpt使用详解
2023-07-15 09:56:17
简析Oracle数据库常见问题及解决方案
2024-01-24 11:15:01
python数字图像处理环境安装与配置过程示例
2023-03-05 07:00:25
详解Django中的ifequal和ifnotequal标签使用
2023-06-24 05:07:04
Check In和Check Out的多人协作管理
2007-02-03 11:39:00
Django+JS 实现点击头像即可更改头像的方法示例
2021-09-01 19:16:44
python编程学习np.float 被删除的问题解析
2021-10-26 23:43:17