JS 简易tab切换

html部分

<div class="container">

     <a href="#" class="item active" data-id="1">按钮1</a><a href="#" class="item" data-id="2">按钮2</a>

     <div class="box active box1">盒子1</div>  

    <div class="box box2">盒子2</div>

</div>

 

 css部分

*{

margin: 0;

padding: 0;

}

a{

text-decoration: none;

}

.container{

width: 400px;

border: 1px solid #ff6700;

margin: 100px auto;

}

.item{

display: inline-block;

width: 200px;

height: 40px;

line-height: 40px;

background-color: lightblue;

text-align: center;

color: yellow;

}

.item.active{

background-color: lightgreen;

}

.box{

width: 400px;

height: 200px;

background-color: orange;

display: none;

}

.box:first-of-type{

background-color: lightcoral;

}

.box.active{

display: block;

}

 

 

 

js部分

let tabs = document.querySelectorAll(".item");

//遍历所有的tabs

tabs.forEach(function(item){

//给每一个item绑定事件

item.addEventListener("click",function(e){

// e.preventDefault();

// 如果点击的item已经具有active类名不需要做任何操作

if(!item.classList.contains("active")){

// 将具有active类名的item的active类名去掉

document.querySelector(".item.active").classList.remove("active");

// 给item添加上active类名

item.classList.add("active");

 

// 让当前显示的box隐藏

document.querySelector(".box.active").classList.remove("active");

// 让对应的新的box显示

let dataId = item.dataset.id;

document.querySelector(".box"+dataId).classList.add("active");

}

});

});