效果圖
思路
當(dāng)我們點(diǎn)擊按鈕時(shí)改變點(diǎn)擊按鈕的背景顏色恢復(fù)其他按鈕的顏色，同時(shí)還要顯示出對(duì)應(yīng)tab卡。
代碼
HTML
首先我們建立簡單的HTML結(jié)構(gòu)，包含三個(gè)按鈕和三個(gè)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來改變相應(yīng)的樣式。
.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實(shí)現(xiàn)
首先我們獲取到三個(gè)按鈕和三個(gè)div。
var btns = document.querySelector(".btns").children;
var content = document.querySelector(".content").children;
移除類名方法：思路是我們遍歷傳入的DOM數(shù)組，使用split()將每一個(gè)的class分割成數(shù)組，然后查找是否存在需要?jiǎng)h除的className，如果存在則記錄下標(biāo)，然后刪除對(duì)應(yīng)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;
}
添加按鈕事件：遍歷得到的所有按鈕，給每個(gè)按鈕添加點(diǎn)擊事件。當(dāng)按鈕被點(diǎn)擊時(shí)，移除所有節(jié)點(diǎn)的active類，然后給被點(diǎn)擊的按鈕和對(duì)應(yīng)的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>
