使用原生JS时，在给tab绑定click事件时，我们怎么获取tab的索引？

来源：3-1 tab切换综合示例

Edward666

2019-12-13 22:36:15

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
<title>Document</title>
<link rel="stylesheet" href="css/idangerous.swiper2.7.6.css">
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
img{
border: none;
width: 100%;
height: 100%;
vertical-align: top;
}
html,body,
.swiper-container,
.swiper-wrapper,
.swiper-slide{
width: 100%;
height: 100%;
}
li{
list-style: none;
}
a{
text-decoration: none;
color: #000;
}
/* tab */
.tab-container{
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
display: flex;
z-index: 999;
background-color: #fff;
}
.tab-item{
width: 25%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.tab-link{
width: 100%;
height: 100%;
}
.tab-item-active{
color: #f00;
background-color: #ddd;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="image/001.png" alt=""></div>
<div class="swiper-slide"><img src="image/002.png" alt=""></div>
<div class="swiper-slide"><img src="image/003.png" alt=""></div>
<div class="swiper-slide"><img src="image/004.png" alt=""></div>
</div>
</div>
<ui class="tab-container" id="tabContainer">
<li class="tab-item tab-item-active" data-index="0">课程</li>
<li class="tab-item" data-index="1">下载</li>
<li class="tab-item" data-index="2">发现</li>
<li class="tab-item" data-index="3">我的</li>
</ui>

<script src="js/idangerous.swiper2.7.6.min.js"></script>
<script>
var tabContainer = document.getElementById('tabContainer');
var tabItems = tabContainer.querySelectorAll('.tab-item');

var mySwiper = new Swiper('.swiper-container',{
loop:true,
onSlideChangeStart: function(swiper){
var index = swiper.activeLoopIndex;
for(var i=0,num = tabItems.length; i<num; i++){
tabItems[i].classList.remove('tab-item-active');
}
tabItems[index].classList.add('tab-item-active');
}
})

tabContainer.addEventListener('click', function(ev){
if(ev.target && /(^|\s)tab\-item($|\s)/.test(ev.target.className)){
// console.log(ev.target.getAttribute("data-index"));
var index = ev.target.getAttribute("data-index");
for(var i=0,num = tabItems.length; i<num; i++){
tabItems[i].classList.remove('tab-item-active');
}
tabItems[index].classList.add('tab-item-active');
mySwiper.swipeTo(index);
}
}, false);
</script>
</body>
</html>

我是手动改每个tab标签添加了一个data-index，然后标明每一个tab的索引，然后通过getAttribute来获取的。请问老师还有没有更加简单的方法来获取tab的索引啊？

写回答

2回答