tab切换和排他思想

最新推荐文章于 2024-09-12 18:22:06 发布

前端宸汐~

最新推荐文章于 2024-09-12 18:22:06 发布

阅读量74

点赞数

文章标签： html javascript

本文链接：https://blog.csdn.net/m0_56683232/article/details/129937523

版权

先来看一下效果：

代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

.wrapper{

width: 400px;

}

.contents{

border:2px solid black

}

.contents .content{

/* 默认全部隐藏 */

display: none;

}

.tabs{

display: flex;

justify-content: space-between;

}

</style>

</head>

<body>

<div class="wrapper">

<div class="tabs">

<div class="tab">商品介绍</div>

<div class="tab">规格包装</div>

<div class="tab">售后保障</div>

<div class="tab">预约说明</div>

</div>

<div class="contents">

<div class="content">内容1</div>

<div class="content">内容2</div>

<div class="content">内容3</div>

<div class="content">内容4</div>

</div>

</div>

<script>

let _tabs=document.querySelectorAll(".tab");

let _contents=document.querySelectorAll(".content");

[..._tabs].forEach((_tab,index)=>{

_tab.οnclick=function(){

//排他思想:每次点击前先去掉所有tab样式，再单独添加当前样式

/* for (let tag of _tabs) {

tag.style.backgroundColor='';

}

for (let tag of _contents) {

tag.style.display='none';

} */

for(let i=0;i<_tabs.length;i++){

_tabs[i].style.backgroundColor='';

_contents[i].style.display='none';

}

this.style.backgroundColor='red';

_contents[index].style.display='block';

}

})

</script>

</body>

</html>