目录
选项卡功能：
制作选项卡的思路：
制作选项卡的方法：
方法1（循环绑定+IIEF函数）的步骤:
方法2（事件委托）的步骤:
模板代码如下：
点击不同的选项按钮，框内出现不同的按钮对应的内容。
点击选项卡的时候，对应的选项的类名变为on，对应的内容的类名变为active；其他的选项的类名变为空，其他的内容的类名变为空。
1.制作好显示模板；
2.获取选项卡对应的选项li和内容对应的内容li；
var aTab = document.querySelectorAll('.tab li');
var aContent = document.querySelectorAll('.content li');3.循环给aTab集合内的每一个li元素绑定onclick事件函数，用IIEF函数把i变成具体的值，从而获取下标，因为传参数的时候i会变成具体的值，不然i是个变量，会受循环影响；
for (var i = 0, len = aTab.length; i < len; i++) {(function (i) {内容})(i);
} 4.将点击事件和修改类名的函数进行绑定，后修改li的类名，方法有下面3种：
方法（1）：循环排他法(先用循环将选项卡和内容内的所有的li的类名设为空，即''，再将循环得到的i对应的选项的li的类名修改为'on'，内容的li的类名修改为'active')
aTab[i].onclick = function () {for (var j = 0; j < len; j++) {aTab[j].className = '';aContent[j].className = '';}aTab[i].className = 'on';aContent[i].className = 'active';}方法（2）：轮转法(引入index变量，并将index的变量的初始值设置为0，再将index对应的选项的li的类名修改为''，内容的li的类名修改为''，修改完后将i的值赋予index，再将index对应的选项的li的类名修改为'on'，内容的li的类名修改为'active')
aTab[i].onclick = function () {aTab[index].className = '';aContent[index].className = '';index = i;aTab[index].className = 'on';aContent[index].className = 'active';
}1.制作好显示模板；
2.获取选项卡对应的Ul节点，选项卡对应的选项li以及内容对应的内容li；
var oUl = document.querySelector('.tab');
var aTab = document.querySelectorAll('.tab li');
var aContent = document.querySelectorAll('.content li');
var index = 0;3.事件委托：将li的点击事件传递到Ul，并和修改函数进行绑定，并判断对象是否为li；
lick = function (event) {};4. 根据点击事件修改类名，方法同上。
方法（1）：循环排他法(先用循环将选项卡和内容内的所有的li的类名设为空，即''，再将循环得到的i对应的选项的li的类名修改为'on'，内容的li的类名修改为'active')
for (var j = 0, len = aTab.length; j < len; j++) {aTab[j].className = '';aContent[j].className = '';
}if (event.LowerCase() == 'li') {index = getElementIdx(event.target);aTab[index].className = 'on';aContent[index].className = 'active';}方法（2）：轮转法(引入index变量，并将index的变量的初始值设置为0，再将index对应的选项的li的类名修改为''，内容的li的类名修改为''，修改完后将i的值赋予index，再将index对应的选项的li的类名修改为'on'，内容的li的类名修改为'active')
if (event.LowerCase() == 'li') {aTab[index].className = '';aContent[index].className = '';index = getElementIdx(event.target);aTab[index].className = 'on';aContent[index].className = 'active';}getElementIdx函数的代码如下：
//获取元素对象下标
function getElementIdx (item) {var elements = item.parentNode.children;for (var i = 0, len = elements.length; i < len; i++) {if (item === elements[i]) {return i;}}
}<!doctype html>
<html lang="zh-cn"><head><meta charset="utf-8"><meta name="keywords" content="选项卡"><meta name="description" content="选项卡"><title>选项卡</title><style>* {margin: 0;padding: 0;}ul {list-style-type: none;}html,body {height: 100%;}body {display: flex;justify-content: center;align-items: center;}.wrap {display: flex;flex-direction: column;width: 600px;height: 265px;box-shadow: 0 0 4px #333;}.tab {display: flex;background-color: #666;}.tab li {width: 80px;height: 45px;line-height: 45px;font-size: 20px;text-align: center;color: #fff;background-color: #666;border-right: 2px solid orange;cursor: pointer;}.tab li:hover {opacity: .8;}.content {position: relative;}.content li {display: none;position: absolute;width: 100%;height: 220px;background-color: #368;color: #fff;font-size: 30px;}. {background-color: #fff;color: orange;font-weight: 700;}.content li.active {display: block;}</style>
</head><body><div class="wrap"><ul class="tab"><li class="on">图片</li><li>专栏</li><li>热点</li></ul><ul class="content"><li class="active">我是图片的内容</li><li>我是专栏的内容</li><li>我是热点的内容</li></ul></div>
</body></html>总体而言，用事件委托和轮转法比较简单直接点。
本文发布于:2024-01-28 22:07:15，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170645083810619.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
