铁雪资源网 Design By www.gsvan.com
本文实例讲解了最简单的面向对象选项卡实现方法,分享给大家供大家参考,具体内容如下
效果图:
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面向对象有所帮助。
铁雪资源网 Design By www.gsvan.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
铁雪资源网 Design By www.gsvan.com
暂无学习javascript面向对象 实例讲解面向对象选项卡的评论...
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?