js原生代码选项卡切换

选项卡功能实现
利用class类的方式，实现点击上面单个不同选项，选项设置样式，并且下面对应的区域切换成相应的内容
切换tab
1. 给所有选项卡绑定点击事件
2. 清除所有选项选中效果
3. 给当前选项设置选中效果

//css代码
* {padding: 0;margin: 0;
}ul,
li {list-style: none;
}.container {width: 600px;margin: 100px auto;
}.container ul {width: 100%;height: 50px;background-color: pink;display: flex;
}.container ul li {width: 200px;height: 100%;text-align: center;line-height: 50px;border: 1px solid darkblue;
}.container ul .active {background-color: skyblue;
}.container ol {position: relative;width: 100%;height: 300px;background-color: rgb(187, 187, 168);text-align: center;line-height: 300px;font-size: 20px;
}.container ol li {position: absolute;left: 50%;transform: translateX(-50%);display: none;
}.container ol .on {display: block;
}

//html代码
<div class="container" id="tab1"><ul><li class="active" data-index="0">选项1</li><li data-index="1">选项2</li><li data-index="2">选项3</li></ul><ol><li class="on">区块1</li><li>区块2</li><li>区块3</li></ol>
</div>

 class Tab {constructor(id) {this.root = document.querySelector(id)this.uls = this.root.querySelectorAll('ul>li')this.ols = this.root.querySelectorAll('ol>li')}onTab() {let that = this// 1. 给所有选项卡绑定点击事件for(let i = 0; i < this.uls.length; i++){this.uls[i].onclick = function(){// 2. 清除所有选项选中效果// 事件处理函数中的this指向事件源 that.onClear()// 3. 给当前选项设置选中效果this.classList.add('active')let index = this.getAttribute('data-index')that.ols[index].classList.add('on')}}}onClear(){for(let i = 0; i < this.uls.length; i++){this.uls[i].classList.remove('active')this.ols[i].classList.remove('on')}}}let tab1 = new Tab('#tab1')tab1.onTab()console.dir(Tab.prototype);console.dir(tab1);

js原生代码选项卡切换相关推荐

经典扫雷——JS原生代码
JS原生写扫雷, 如何不用xy坐标写出扫雷附带思路图 function Mine(tr,td,leinum,num){this.tr=tr;this.td=td;this.arrsy=[];this ...
qt tablewidget 实现tab来回切换_原生JS实现TAB选项卡切换效果
插件化写法: HTML: tab1 tab2 tab3 tab4 tab5 页面1 页面2 页面3 页面4 页面5 css: .wrap{height:500px;width:80%;margin:5 ...
基于面向对象的图片轮播（js原生代码）
无论你想走多远,你都需要不断地走下去.前端最精华的便是原生的js,这也是我们前端工程师的技术分层的重要指标,也提现这你的代码能力,开发的水平.废话不多说,进入今天的主要分享----基于面向对象思想的图 ...
jQuery转换JS原生代码
很多的 JavaScript 开发人员,包括我在内,都很喜欢 jQuery.因为它的简单,因为它有很多丰富的插件可供使用,和其它优秀的工具一样,jQuery 让我们开发人员能够更轻松的开发网站和 We ...
js原生代码实现购物车
一.效果展示双击商品,如果购物车没有该商品,添加到购物车中,如果有该商品数量加1. 全选全不选刷新后数据不会消失二.代码展示 1.基础框架 .screen里面展示商品,.cart购物车,商品信息 ...
倒计时（小时：分钟：秒钟）【JS原生代码】
<style type="text/css"> input { border: 1px solid rgba(0, 0, 0, ...
学做全屏浮动广告 JS 原生代码
<!DOCTYPE HTML> <html><head><title>JS全屏漂浮广告</title> <meta http-equi ...
使用js原生代码实现类似新闻列表的滚动题目来自4399小游戏2020年前端笔试编程题
新闻列表的滚动循环播放 html代码 CSS代码 Script代码总结题目要求: 要求实现以下页面,其中列表项是滚动循环播放的,而且每次只显示3个,当鼠标经过的时候停止播放,鼠标离开继续播放 co ...
炫酷的鼠标特效JS 原生代码
让你的鼠标炫酷起来! <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang=" ...

js原生代码选项卡切换

js原生代码选项卡切换相关推荐

最新文章

热门文章