JS-----选项卡切换
tab选项卡如何实现切换，其中涉及获取元素的内容并修改，循环，遍历知识
·
用js实现以上操作，以目前学习的知识，有两种做法，分别是绑定事件和事件分离。这里比较推荐的写法是事件分享写法。
要写这样一个页面先写html和css将布局做好。这是小编的代码~
<style>
.container {
height: 100px;
display: flex;
flex-wrap: wrap;
}
.container>div {
width: 400px;
height: 100px;
background-color: skyblue;
text-align: center;
line-height: 100px;
font-size: 30px;
border: 5px solid pink;
}
#main {
height: 400px;
background: paleturquoise;
font-size: 100px;
width: 1230px;
text-align: center;
}
.container>div:hover {
cursor: pointer;
}
.container .active {
background: darkorange;
}
</style>
</head>
<body>
<div class="container">
<div id="one">选项1</div>
<div id="two">选项2</div>
<div id="three">选项3</div>
</div>
<div id="main">1</div>那接下来重点分分享一下js的实现
1.首先要明确我们选中的元素，如何现在选项卡进行切换。
2.对于选中的选项卡我们要清除他的active
3.在给点击的选项卡加上active样式
完成这三点，基本你可以初步现实他的样式，但是为了代码的健壮性。我们应该考虑的更加全面一些。比如在加一个选项卡4，我们如何现实点击他会有响应，此时我们应该想到有For循环去遍历他。
先分享一下绑定事件的写法~
<script>
var divEle = document.querySelectorAll('.container>div')//选中container下的所有Div
function onTab(index) {
for (let i = 0; i < divEle.length; i++) { //遍历所有Div
divEle[i].className = '' //清除所有的active样式
}
divEle[index].className = 'active'
console.log(index)
if (index == 0) {
var divmain = document.querySelector('#main')
divmain.style.fontSize = '200px'
divmain.style.backgroundColor = 'yellow'
}
else if (index == 1) {
var divmain = document.querySelector('#main')
divmain.style.fontSize = '200px'
divmain.style.backgroundColor = 'green'
}
else {
var divmain = document.querySelector('#main')
divmain.style.fontSize = '200px'
divmain.style.backgroundColor = 'pink'
}
}
这样写js可以实现界面响应，但是代码不够完善。
将事件分离写法，双重for循环遍历，再用if判断当前获取的值，使代码具有健壮性！
<script>
var divEle = document.querySelectorAll('.container>div')
var divMain = document.querySelector('#main')
for (let j = 0; j < divEle.length; j++) {
divEle[j].onclick = function () {
for (var i = 0; i < divEle.length; i++) {
divEle[i].className = ''
}
this.className = 'active'
if (j == 0) {
divMain.style.fontSize = '100px'
divMain.style.backgroundColor = 'yellow'
var newDiv = document.querySelector('#one') //获取id名为one的div
divMain.innerText = newDiv.innerText //获取到选1
}
else if (j == 1) {
divMain.style.fontSize = '100px'
divMain.style.backgroundColor = 'gray'
var newDiv = document.querySelector('#two') //获取id名为one的div
divMain.innerText = newDiv.innerText
}
else {
divMain.style.fontSize = '100px'
divMain.style.backgroundColor = 'green'
var newDiv = document.querySelector('#three') //获取id名为one的div
divMain.innerText = newDiv.innerText
}
}
}
</script>不过可以不给div赋予id值，直接使用nth-child一样可以成功哦，小编是小白，若有错误望留言指正！
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
5
0- 0
已为社区贡献2条内容
所有评论(0)