在js中排它思想非常重要,因为在网面中会经常用到这一思想,例如购物网站上的tab栏切换,以及轮播图……
因此写一个小demo来看一看排它思想,如下图所示,点击某一个按钮时,当前按钮改变背景颜色,并且其它按钮的背景颜色变成默认颜色,同时下面的div也跟着显示相应的内容。
代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box {
width: 350px;
height: 350px;
border: 1px solid pink;
margin: 100px auto;
padding: 20px;
}
.btn {
background: pink;
}
input {
margin-bottom: 25px;
margin-right: 25px;
}
.one {
width: 300px;
height: 300px;
border: 1px solid pink;
display: none;
background: silver;
}
</style>
</head>
<body>
<div class="box" id="Box">
<input class="btn" type="button" value="按钮1"/>
<input type="button" value="按钮2"/>
<input type="button" value="按钮3"/>
<input type="button" value="按钮4"/>
<div class="one" style="display: block">内容1</div>
<div class="one">内容2</div>
<div class="one">内容3</div>
<div class="one">内容4</div>
</div>
<script>
// 获取要操作的对象
var box = document.getElementById("Box");
var btn = document.getElementsByTagName("input"); //获取所有的按钮
var divs = box.getElementsByTagName("div"); //获取box下面的所有div
//循环给每个按钮注册事件
for(var i = 0; i < btn.length; i++) {
btn[i].index = i; //给按钮添加一个索引值
//给每个按钮注册点击事件
btn[i].onclick = function() {
for(var j = 0; j < btn.length; j++) {
btn[j].className = ""; //先将所有按钮样式清空
divs[j].style.display = "none"; //首先让所有div隐藏
}
this.className = "btn"; //给点击的按钮添加样式
divs[this.index].style.display = "block"; //点击按钮后,将与之对应的div显示出来
}
}
</script>
</body>
</html>