JS实现tab选项卡效果
2020-03-08 本文已影响0人
知名大学士
效果图
思路
当我们点击按钮时改变点击按钮的背景颜色恢复其他按钮的颜色，同时还要显示出对应tab卡。
代码
HTML
首先我们建立简单的HTML结构，包含三个按钮和三个div。
<div class="box">
<div class="btns">
<button class="active">1</button>
<button>2</button>
<button>3</button>
</div>
<div class="content">
<div class="con active">1</div>
<div class="con">2</div>
<div class="con">3</div>
</div>
</div>
CSS
这里我们分别给按钮和tabative属性，通过添加和去掉active来改变相应的样式。
.box {
width: 400px;
height: 200px;
border: 2px solid gray;
margin: 0 auto;
overflow: hidden;
}
.content {
height: 180px;
text-align: center;
line-height: 180px;
font-size: 100px;
position: relative;
}
.con {
width: 100%;
height: 100%;
position: absolute;
background: #aaa;
display: none;
}
button.active {
color: #fff;
background: grey;
}
.con.active {
display: block;
}
JS实现
首先我们获取到三个按钮和三个div。
var btns = document.querySelector(".btns").children;
var content = document.querySelector(".content").children;
移除类名方法：思路是我们遍历传入的DOM数组，使用split()将每一个的class分割成数组，然后查找是否存在需要删除的className，如果存在则记录下标，然后删除对应class。
function removeClass(ele_list, className){
for(var i = 0; i < ele_list.length; i++){
var class_arr = ele_list[i].className.split(" ");
var index = class_arr.indexOf(className);
if(index !== -1){
class_arr.splice(index, 1);
ele_list[i].className = class_arr.join("");
}
}
}
添加类名方法：
function addClass(ele, className){
ele.className += " " + className;
}
添加按钮事件：遍历得到的所有按钮，给每个按钮添加点击事件。当按钮被点击时，移除所有节点的active类，然后给被点击的按钮和对应的tabdiv添加active类。
for (var i = 0; i < btns.length; i++) {
btns[i].index = i;
console.log(btns[i]);
btns[i].onclick = function () {
removeClass(btns, "active");
removeClass(content, "active");
// this.className += " active";
addClass(this, "active");
addClass(content[this.index], "active");
}
}
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 400px;
height: 200px;
border: 2px solid gray;
margin: 0 auto;
overflow: hidden;
}
.content {
height: 180px;
text-align: center;
line-height: 180px;
font-size: 100px;
position: relative;
}
.con {
width: 100%;
height: 100%;
position: absolute;
background: #aaa;
display: none;
}
button.active {
color: #fff;
background: grey;
}
.con.active {
display: block;
}
</style>
</head>
<body>
<div class="box">
<div class="btns">
<button class="active">1</button>
<button>2</button>
<button>3</button>
</div>
<div class="content">
<div class="con active">1</div>
<div class="con">2</div>
<div class="con">3</div>
</div>
</div>
<script>
var btns = document.querySelector(".btns").children;
var content = document.querySelector(".content").children;
function removeClass(ele_list, className){
for(var i = 0; i < ele_list.length; i++){
var class_arr = ele_list[i].className.split(" ");
var index = class_arr.indexOf(className);
if(index !== -1){
class_arr.splice(index, 1);
ele_list[i].className = class_arr.join("");
}
}
}
function addClass(ele, className){
ele.className += " " + className;
}
for (var i = 0; i < btns.length; i++) {
btns[i].index = i;
console.log(btns[i]);
btns[i].onclick = function () {
removeClass(btns, "active");
removeClass(content, "active");
// this.className += " active";
addClass(this, "active");
addClass(content[this.index], "active");
}
}
</script>
</body>
</html>
