JavaScript基础 - 经典案例3 - tab栏选项卡切换

通常我们用 js 写 tab 栏切换功能会用到 排他思想，即干掉其他人，留下我自己

但也可以用一个更有效率的方法：找出那个特殊的人，精准干掉他，放过其他无辜的人，然后留下我自己

实现过程：假设需要切换的样式类为 active类，要干掉那个唯一的active类

document.querySelector('.active').classList.remove('active')

之后再去给自己设置 active类就可以啦！

// this指需要切换的tab元素
this.classList.add('active')

柯南tab栏案例练习：

代码示例：

HTML：

<div class="card"><ul class="tab"><li class="tab-items active">柯南</li><li class="tab-items">小兰</li><li class="tab-items">小哀</li><li class="tab-items">基德</li></ul><div class="info"><div class="main active"><p>外表看似小孩，其真实身份是高中生侦探——工藤新一。</p></div><div class="main"><p>新一的青梅竹马，一直喜欢着新一，在他突然消失后等待着他的归来。</p></div><div class="main"><p>外表是小孩，但其实是黑衣组织的一员，新一被灌下的毒药（APTX4869）的开发者，代号雪莉。</p></div><div class="main"><p>变装达人。轰动世界的神出鬼没的怪盗。总是会送上预告函，将警察玩弄于股掌之间，被世人称作“怪盗基德”。</p></div></div>
</div>

JS：

// 获取元素
let tabs = document.querySelectorAll('.tab .tab-items')
let mains = document.querySelectorAll('.info .main')// 监听tab栏点击事件
for (let i = 0; i < tabs.length; i++) {tabs[i].addEventListener('click', function(){// 切换tab栏样式// 将原本有active类的那个tab的active类移除掉document.querySelector('.tab-items.active').classList.remove('active')// 给触发点击事件的tab增加active类this.classList.add('active')// 切换下方内容区// 隐藏原本显示的那个内容区document.querySelector('.main.active').classList.remove('active')// 显示当前tab对应的内容区mains[i].classList.add('active')})
}

CSS：

* {margin: 0;padding: 0;
}li {list-style: none;
}.card {width: 400px;margin: 100px auto;
}.tab {display: flex;justify-content: space-between;align-items: stretch;width: 400px;height: 50px;
}.tab .tab-items {width: 94px;line-height: 50px;background-color: rgb(207, 139, 138);font-size: 18px;text-align: center;text-decoration: none;cursor: pointer;
}.tab .tab-items.active {background-color: rgb(171, 197, 222);
}.info {height: 250px;
}.info .main {display: none;width: 400px;height: 250px;padding: 15px;box-sizing: border-box;background-color: rgb(171, 197, 222);font-size: 21px;
}.info .main.active {display: block;
}

结束；

JavaScript基础 - 经典案例3 - tab栏选项卡切换相关推荐

案例：tab 栏切换（重点案例）
案例:tab 栏切换(重点案例) 业务需求: 当鼠标点击上面相应的选项卡(tab),下面内容跟随变化. 案例分析: (1)Tab 栏切换有2个大的模块. (2)上面的模块选项卡,点击某一个,当前这一个 ...
javascript高级编程教程,javascript基础入门案例
谁有比较好的javascript视频教程李炎恢的javascript教程,在verycd上可以下载. 结合<javascript高级程序设计>学习,应该会比较好,他这个教程就是参考了&l ...
纯CSS实现Tab栏的切换
思路利用input标签的radio类型中的checked属性控制当前选中tab 隐藏radio的显示,用label标签的for属性关联radio,对label进行样式编写实现tab栏的自定义. 一个 ...
tab栏自动切换功能鼠标移动上去取消自动切换离开启动自动切换
<!DOCTYPE html> <html><head><meta charset="utf-8" /><meta name= ...
js实现tab栏的切换
目录实现点击变色效果: 点击之后下面的内容跟着变化全部代码: 最后: 界面效果图如上,点击第二栏后第二栏变为红色,下面显示第二栏的内容. html代码:如下 <header class=&q ...
oracle写转帐的存储过程,Oracle存储过程及块编程基础经典案例
Oracle存储过程及块编程基础案例 pl/sql(procedure language/sql:过程语言)编程是oracle的精髓之所在.跑得慢: 提高应用程序的运行性能,提高效率. 1.作为存储过 ...
uniapp tab 栏选项卡与内容区域联动
1.这个是shi t <template><view class="tab"><scroll-view scro ...
javaScript算术题(经典案例)
案例1 求1~100之间所有数的总和和平均值 <script>let sum = 0;let average = 0;for(let i = 1; i <= 100; ...
原生JS幻灯片案例——与tab栏切换类似
幻灯片案例样式: 1. 这个问题是因为img是xxx元素,display:block 就没问题了 2. 主图也是写好6个盒子,展示的显示,剩余的隐藏.通过添加删除类名来呈现 3. 类名修改的方法可有 ...

JavaScript基础 - 经典案例3 - tab栏选项卡切换

JavaScript基础 - 经典案例3 - tab栏选项卡切换相关推荐

最新文章

热门文章