Tab切换::点击切换、点击延迟切换、自动切换
一 布局
<div>
<ul>
<li class="active1">1</li>
<li>2</li>
<li>3</li>
</ul>
<ol>
<li class="active2">1</li>
<li>2</li>
<li>3</li>
</ol>
</div>
二 css样式
*{
margin: 0;
padding: 0;
}
div{
width: 600px;
border:5px solid;
margin: 0 auto;
}
ul,li,ol{
list-style: none;
}
ul{
height: 80px;
display: flex;
}
ul li{
flex: 1;
background-color: pink;
text-align: center;
line-height: 80px;
font-size: 50px;
}
ol {
height: 320px;
position: relative;
}
ol li{
line-height: 320px;
text-align: center;
font-size: 100px;
position: absolute;
left: 0;
top: 0;
width:100%;
height: 100%;
background-color: powderblue;
display: none;
}
.active1{
background-color: salmon;
}
.active2{
display: block;
}
三 js布局
1. 获取元素
- ul > li 都要获取到, 因为每一个 li 都有一个点击事件
- ol > li 都要获取到, 因为要操作他们的类名
var ulli=document.querySelectorAll('ul li')
var olli=document.querySelectorAll('ol li')
2 给每一个 ul 里面的 li 元素添加点击事件(使用循环绑定事件)
for(var i=0;i<ulli.length;i++) {
ulli[i].onclick=function(){}
}
3 点击之后产生的效果
- 让包含自己在内的所有li没有类名
- 单独给自己添加类名
- 添加ol下对应索引的类名
//给ul下的li添加点击事件
for(var i=0;i<ulli.length;i++) {
//添加属性,使olli可以获得ulli的索引
ulli[i].setAttribute('index',i)
ulli[i].onclick=function(){
//清空所有li类名
for(var j=0;j<ulli.length;j++) {
ulli[j].className=''
olli[j].className=''
}
//给被点击的li单独加类名
this.className='active1'
//给ol下对应li添加类名
var inli=this.getAttribute('index')
olli[inli].className='active2'
}
}
4 延迟切换
//获取li
var ulli = document.querySelectorAll('ul li')
var olli = document.querySelectorAll('ol li')
for (var i = 0; i < ulli.length; i++) {
//添加属性,使olli可以获得ulli的索引
ulli[i].setAttribute('index', i)
//添加点击事件
ulli[i].onclick = function() {
var it = this
//如果存在准备执行的计时器,立即清除,解决li划过的延迟bug;
if (timer) {
clearTimeout(timer)
timer = null
}
//添加setTimeout定时器,使效果在点击0.5s后显现
var timer = window.setTimeout(function() {
for (var j = 0; j < ulli.length; j++) {
//清空所有li类名
ulli[j].className = ''
olli[j].className = ''
}
//给被点击的li单独加类名
it.className = 'active1'
//给ol下对应li添加类名
var inli = it.getAttribute('index')
olli[inli].className = 'active2'
}, 500)
}
}
5 自动切换
//获取li
var ulli = document.querySelectorAll('ul li')
var olli = document.querySelectorAll('ol li')
//添加索引
var inde = -1
setInterval(function() {
//当所有li切换一遍后,把索引清空,重新进行切换
inde++
if (inde > 2) {
inde = 0
}
//进行tab切换
for (var i = 0, len = ulli.length; i < len; i++) {
ulli[i].className = ''
olli[i].className = ''
}
ulli[inde].className = 'active1'
olli[inde].className = 'active2'
}, 1000)
四全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Tab切换</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 600px;
border: 5px solid;
margin: 0 auto;
}
ul,
li,
ol {
list-style: none;
}
ul {
height: 80px;
display: flex;
}
ul li {
flex: 1;
background-color: pink;
text-align: center;
line-height: 80px;
font-size: 50px;
}
ol {
height: 320px;
position: relative;
}
ol li {
line-height: 320px;
text-align: center;
font-size: 100px;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: powderblue;
display: none;
}
.active1 {
background-color: salmon;
}
.active2 {
display: block;
}
</style>
</head>
<body>
<!-- 布局 -->
<div>
<ul>
<li class="active1">1</li>
<li>2</li>
<li>3</li>
</ul>
<ol>
<li class="active2">1</li>
<li>2</li>
<li>3</li>
</ol>
</div>
<script>
//获取li
var ulli = document.querySelectorAll('ul li')
var olli = document.querySelectorAll('ol li')
//给ul下的li添加点击事件
for (var i = 0; i < ulli.length; i++) {
//添加属性,使olli可以获得ulli的索引
ulli[i].setAttribute('index', i)
ulli[i].onclick = function() {
//清空所有li类名
for (var j = 0; j < ulli.length; j++) {
ulli[j].className = ''
olli[j].className = ''
}
//给被点击的li单独加类名
this.className = 'active1'
//给ol下对应li添加类名
var inli = this.getAttribute('index')
olli[inli].className = 'active2'
}
}
//tab自动切换
// //添加索引
// var inde = -1
// setInterval(function() {
// //当所有li切换一遍后,把索引清空,重新进行切换
// inde++
// if (inde > 2) {
// inde = 0
// }
// //进行tab切换
// for (var i = 0, len = ulli.length; i < len; i++) {
// ulli[i].className = ''
// olli[i].className = ''
// }
// ulli[inde].className = 'active1'
// olli[inde].className = 'active2'
// }, 1000)
//延迟切换
// for (var i = 0; i < ulli.length; i++) {
// //添加属性,使olli可以获得ulli的索引
// ulli[i].setAttribute('index', i)
// //添加点击事件
// ulli[i].onclick = function() {
// var it = this
// //如果存在准备执行的计时器,立即清除,解决li划过的延迟bug;
// if (timer) {
// clearTimeout(timer)
// timer = null
// }
// //添加setTimeout定时器,使效果在点击0.5s后显现
// var timer = window.setTimeout(function() {
// for (var j = 0; j < ulli.length; j++) {
// //清空所有li类名
// ulli[j].className = ''
// olli[j].className = ''
// }
// //给被点击的li单独加类名
// it.className = 'active1'
// //给ol下对应li添加类名
// var inli = it.getAttribute('index')
// olli[inli].className = 'active2'
// }, 500)
// }
// }
</script>
</body>
</html>