实例演示选项卡
实例代码如下：
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>选项卡</title><link rel="stylesheet" href="css/demo2.css"></head><body><div class="box"><!-- 1. 标签 --><!-- 子元素上的点击事件会冒泡到父元素,利用这个特点,只需要给父元素添加点击事件就可以了 --><ul class="menu" onclick="show()"><!-- 先给默认显示的标签和对应的内容添加 class="active"处于激活状态/可见 --><!-- 使用自定义属性data-index使标签和与之对应的内容进行绑定 --><li data-index="1" class="active">唐诗</li><li data-index="2">宋词</li><li data-index="3">论语</li></ul><!-- 2. 内容 --><ul class="content active" data-index="1"><li>春眠不觉晓</li><li>处处闻啼鸟</li><li>夜来风雨声</li><li>花落知多少</li></ul><ul class="content" data-index="2"><li>昨夜西风凋碧树</li><li>独上高楼</li><li>望尽天涯路</li><li>欲寄彩笺兼尺素</li><li>山长水阔知何处</li></ul><ul class="content" data-index="3"><li>学而时习之，不亦说乎</li><li>有朋自远方来，不亦乐乎</li><li>人不知而不愠，不亦君子乎</li></ul></div><script>function show() {// 事件绑定者// console.log(event.currentTarget);// 事件主体// console.log(event.target);const ul = event.currentTarget;const li = event.target;// 1. 将原高亮的标签去掉active,并把当前的标签设置为active[...ul.children].forEach(li => li.classList.remove('active'));li.classList.add('active');// 2. 根据标签的data-index进行查询,获取与它对应的列表const content = document.querySelectorAll('.content');// document.querySelectorAll()返回的是NodeList对象,上面已定义了forEach,所以不用转真数组console.log(content);content.forEach(li => li.classList.remove('active'));console.log([...content].filter(ul => ul.dataset.index === li.dataset.index)[0]);// filter(ul => ul.dataset.index === li.dataset.index)[0]// 用find进行简化, find就是获取filter结果数组中的第一个[...content].find(ul => ul.dataset.index === li.dataset.index).classList.add('active');}</script></body></html>
效果图如下：
