【JavaScript】实现网页中的选项卡

一、简易选项卡

以下是实现一个简单选项卡的代码。代码中有注释。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>实现简易选项卡</title><style>* {margin: 0;padding: 0;}ul {/* 布局方式变为弹性盒模型 */display: flex;list-style: none;}li {height: 50px;line-height: 50px;text-align: center;flex: 1;}.active {color: red;/* 设置底部边框 */border-bottom: 1px solid red;}</style></head><body><ul><!-- 选项卡1一开始就有下划线 --><li class="active" id="item1">1</li><li id="item2">2</li></ul><script>// 点击第一个选项卡时，将点击效果添加到自身，并从第二个选项卡中删除点击效果item1.onclick = function () {item1.classList.add("active");item2.classList.remove("active");};// 点击第二个选项卡时，将点击效果添加到自身，并从第一个选项卡中删除点击效果item2.onclick = function () {item1.classList.remove("active");item2.classList.add("active");};</script></body>
</html>

运行代码，点击第一个选项卡
在这里插入图片描述
点击第二个选项卡

二、完整选项卡

以下是实现一个完整选项卡的代码。代码中有注释。总体而言，此代码允许选项卡式导航，单击选项卡将激活它并显示其相应的内容。先前处于活动状态的选项卡和内容将被停用。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>选项卡</title><style>* {margin: 0;padding: 0;}ul {list-style: none;}.header {display: flex;width: 500px;}.header li {flex: 1;height: 50px;line-height: 50px;/* 垂直居中 */text-align: center;/* 边框 */border: 1px solid black;}.box {position: relative;}.box li {position: absolute;left: 0;top: 0;width: 500px;height: 200px;background-color: yellow;display: none;}.header .active {background-color: red;}.box .active {display: block;}</style></head><body><ul class="header"><li class="active">1</li><li>2</li><li>3</li><li>4</li></ul><ul class="box"><li class="active">aaa</li><li>bbb</li><li>ccc</li><li>ddd</li></ul><script>var oHeaderItems = document.querySelectorAll(".header li");var oBoxItems = document.querySelectorAll(".box li");for (var i = 0; i < oHeaderItems.length; i++) {// i循环一次就结束了，因此要构建自定义属性，跟踪所单击项目的索引oHeaderItems[i].dataset.index = i;// 定义一个名为handler的 onclick 事件处理程序函数oHeaderItems[i].onclick = handler;}function handler() {//this表示当前点击的这一个项目，该索引用于标识 oHeaderItems 和 oBoxItems 中的相应项。var index = this.dataset.index;// for 循环用于从 oHeaderItems 和 oBoxItems 中的所有项中的activefor (var m = 0; m < oHeaderItems.length; m++) {oHeaderItems[m].classList.remove("active");oBoxItems[m].classList.remove("active");}//给当前选中的选项卡加上activeoHeaderItems[index].classList.add("active");oBoxItems[index].classList.add("active");}</script></body>
</html>