目录
选项卡功能:
点击不同的选项按钮,框内出现不同的按钮对应的内容。
制作选项卡的思路:
点击选项卡的时候,对应的选项的类名变为on,对应的内容的类名变为active;其他的选项的类名变为空,其他的内容的类名变为空。
制作选项卡的方法:
方法1(循环绑定+IIEF函数)的步骤:
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';
}
方法2(事件委托)的步骤:
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;
oUl.onclick = 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.target.tagName.toLowerCase() == '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.target.tagName.toLowerCase() == '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;
}
.tab li.on {
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>
总体而言,用事件委托和轮转法比较简单直接点。