<body>
<div class="container">
<a href="#" class="item active" data-id="1">A</a><a href="#" class="item" data-id="2">B</a>
<div class="box active box1" >box1</div>
<div class="box box2" >box2</div>
</div>
<script>
// 获取所有的类名为item的元素
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");
}
/* console.log(item);
console.log(e.target);
console.log(this); */
});
});
</script>
156
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
