目录
面向过程
面向对象
面向过程
注意：
ul>li 标签属性中 的index属性值是串联起ol>li与ul>li的关键，通过调用相同索引下标的数组中的不同属性的属性值达到切换内容的效果。
通过事件委托找到对应的ul>li 进行css属性的删除与新增做到背景颜色改变和内容改变的效果。
Document
面向对象
注意：
之前调用的是变量，现在调用的是对象中存储的属性与属性值 。
确保 this 的指向是对象，当事件绑定 forEach 定时器延时器... 中 this指向 会改变
修改this指向的方法：提前使用变量 存储 原始this指向，使用 变量 替代 this关键词
代码展示：
Document
外链构造函数代码：
// 在外部文件中定义构造函数
class CreateTabObj{
// 构造器 定义属性和属性值
// element 创建生成选项卡的标签对象
// msgArr 生成选项开内容的数组
constructor( element , msgArr ){
this.ele = element ;
this.arr = msgArr ;
// 定义属性 存储 面向过程中 需要的全局变量
this.oUlLis;
this.oOlLis;
}
// 构造器外定义函数方法
// 函数1 动态生成页面
setPage(){
// 创建固定的标签节点 ul ol
const oUl = document.createElement('ul');
const oOl = document.createElement('ol');
// 定义字符串 存储动态渲染生成的ul>li ol>li
let ulLiStr = '';
let olLiStr = '';
// 循环遍历数组 根据数组中的内容动态渲染生成li标签
// 之前是 直接调用 变量 arr1 中 存储的数据
// 现在是 调用 实例化对象中arr属性存储的数据
// arr1 ---> this.arr
this.arr.forEach( function(item,key){
// item 是 数组单元存储的数据 也就是 存储数据的对象
// key 是 数组单元的索引下标
// 第一个ul>li 有 class,active样式
ulLiStr += key === 0 ? `${item.ulLi} ` : `${item.ulLi} ` ;
// 第一个ol>li 有 class,active样式
olLiStr += key === 0 ? `${item.olLi} ` : `${item.olLi} ` ;
});
// 将字符串写入ul ol 标签
oUl.innerHTML = ulLiStr ;
oOl.innerHTML = olLiStr ;
// 将 ul ol 标签 写入 div标签中
// 标签对象 ---> this.ele
this.ele.appendChild( oUl );
this.ele.appendChild( oOl );
// 获取所有的ul>li
this.oUlLis = oUl.querySelectorAll('li');
// 获取所有的ol>li
this.oOlLis = oOl.querySelectorAll('li');
}
// 函数2 添加事件
// 设定参数 存储事件类型 可以是 click 可以是 mouseover 默认值是 mouseover
setEvent( event = 'mouseover' ){
// class 构造函数中 this指向 默认是 对象
console.log( this);
// 给 父级标签 添加 事件 通过事件委托完成效果
// 提前定义一个变量 存储 原始this指向
const _this = this ;
// 事件绑定 中 this指向改变
this.ele.addEventListener( event , function(e){
// 事件绑定中 this指向 默认是 事件源
// 不再是 对象
// 也就是在 事件绑定中 this.属性 不能 正确调用对象中的数据
if( e.target.getAttribute('name') === 'ulLi' ){
// 清除所有 ul>li 的 class,active
_this.oUlLis.forEach( function(item , key) {
// 给 ul>li 清除 class,active
item.classList.remove('active');
// 给 索引下标相同的 ol>li 清除 class,active
_this.oOlLis[key].classList.remove('active');
})
// 给 点击的 ul>li 添加 class,active
e.target.classList.add('active');
// 给 点击的 ul>li 索引下标 相同的 ol>li 添加 class,active
_this.oOlLis[ Number( e.target.getAttribute('index') ) ].classList.add('active');
}
})
}
}
运行结果：
到此这篇关于JavaScript实现选项卡功能(面向过程与面向对象)的文章就介绍到这了,更多相关JavaScript 选项卡内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
js实现简单选项卡功能
javascript实现tabs选项卡切换效果(自写原生js)
js选项卡的实现方法
原生js实现tab选项卡切换
JQuery 选项卡效果(JS与HTML的分离)
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
一个js封装的不错的选项卡效果代码