第一篇
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>按钮点击切换</title>
<style type="text/css">
.wp{
width: 400px;
height: 400px;
text-align: center;
line-height: 400px;
font-size: 3em;
}
.wp div{
width: 400px;
height: 400px;
}
.wp div:nth-child(1){
background: red;
}
.wp div:nth-child(2){
background: green;
display: none;
}
.wp div:nth-child(3){
background: blue;
display: none;
}
.wp div:nth-child(4){
background: yellow;
display: none;
}
.btn{
width: 400px;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 1.5em;
}
.btn span{
width: 100px;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 1.5em;
float: left;
}
.btn span:nth-child(1){
background: red;
}
.btn span:nth-child(2){
background: green;
}
.btn span:nth-child(3){
background: blue;
}
.btn span:nth-child(4){
background: yellow;
}
</style>
</head>
<body>
<div class="wp">
<div id='box1'>box1</div>
<div id='box2'>box2</div>
<div id='box3'>box3</div>
<div id='box4'>box4</div>
</div>
<div class="btn">
<span id='btn1'>btn1</span>
<span id='btn2'>btn2</span>
<span id='btn3'>btn3</span>
<span id='btn4'>btn4</span>
</div>
</body>
<script type="text/javascript">
var _box1 =document.getElementById('box1');
var _box2 =document.getElementById('box2');
var _box3 =document.getElementById('box3');
var _box4 =document.getElementById('box4');
var _btn1 =document.getElementById('btn1');
var _btn2 =document.getElementById('btn2');
var _btn3 =document.getElementById('btn3');
var _btn4 =document.getElementById('btn4');
console.log(_btn1)
_btn1.onclick = function(){
_box1.style.display = 'block';
_box4.style.display = 'none';
_box2.style.display = 'none';
_box3.style.display = 'none';
}
_btn2.onclick = function(){
_box2.style.display = 'block';
_box1.style.display = 'none';
_box3.style.display = 'none';
_box4.style.display = 'none';
}
_btn3.onclick = function(){
_box3.style.display = 'block';
_box2.style.display = 'none';
_box1.style.display = 'none';
_box4.style.display = 'none';
}
_btn4.onclick = function(){
_box4.style.display = 'block';
_box3.style.display = 'none';
_box2.style.display = 'none';
_box1.style.display = 'none';
}
</script>
</html>
第二篇
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>按钮点击</title>
<style type="text/css">
.wp{
width: 400px;
height: 400px;
text-align: center;
line-height: 400px;
font-size: 3em;
}
.wp div{
width: 400px;
height: 400px;
}
.wp div:nth-child(1){
background: red;
}
.wp div:nth-child(2){
background: green;
display: none;
}
.wp div:nth-child(3){
background: blue;
display: none;
}
.wp div:nth-child(4){
background: yellow;
display: none;
}
.btn{
width: 400px;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 1.5em;
}
.btn span{
width: 100px;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 1.5em;
float: left;
}
.btn span:nth-child(1){
background: red;
}
.btn span:nth-child(2){
background: green;
}
.btn span:nth-child(3){
background: blue;
}
.btn span:nth-child(4){
background: yellow;
}
</style>
</head>
<body>
<div class="wp" id="wp">
<div id='box1'>box1</div>
<div id='box2'>box2</div>
<div id='box3'>box3</div>
<div id='box4'>box4</div>
</div>
<div class="btn" id="btn">
<span id='btn1'>btn1</span>
<span id='btn2'>btn2</span>
<span id='btn3'>btn3</span>
<span id='btn4'>btn4</span>
</div>
</body>
<script type="text/javascript">
var _wp = document.getElementById('wp').getElementsByTagName('div');
var _btn = document.getElementById('btn').getElementsByTagName('span');
for(var i = 0;i < _btn.length;i++){
_btn[i].aa = i;
_btn[i].onclick = function(){
//console.log(this.aa);
for(var j =0;j<_wp.length;j++){
_wp[j].style.display ='none';
}
_wp[this.aa].style.display = 'block';
}
}
//循环定时器
setInterval(function(){
console.log(1);
},1000)
</script>
</html>
第三篇
<html lang="en">
<head>
<meta charset="UTF-8">
<title>按钮点击切换</title>
<style type="text/css">
.wp{
width: 400px;
height: 400px;
text-align: center;
line-height: 400px;
font-size: 3em;
}
.wp div{
width: 400px;
height: 400px;
}
.wp div:nth-child(1){
background: red;
}
.wp div:nth-child(2){
background: green;
display: none;
}
.wp div:nth-child(3){
background: yellow;
display: none;
}
.wp div:nth-child(4){
background: blue;
display: none;
}
.btn{
width: 400px;
height: 50px;
text-align: center;
font-size: 1.5em;
line-height: 50px;
}
.btn span{
width: 100px;
height: 50px;
float: left;
text-align: center;
line-height: 50px;
font-size: 1.5em;
}
.btn span:nth-child(1){
background: red;
}
.btn span:nth-child(2){
background: green;
}
.btn span:nth-child(3){
background: yellow;
}
.btn span:nth-child(4){
background: blue;
}
</style>
</head>
<body>
<div class="wp" id="wp">
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
<div id="box4">4</div>
</div>
<div class="btn" id="btn">
<span id="btn1">1</span>
<span id="btn2">2</span>
<span id="btn3">3</span>
<span id="btn4">4</span>
</div>
</body>
<script type="text/javascript">
var _wp = document.getElementById('wp').getElementsByTagName('div');
var _btn = document.getElementById('btn').getElementsByTagName('span');
//for循环中的事件绑定
for(var i = 0 ; i < _btn.length; i++){
_btn[i].aa = i;
_btn[i].onclick = function () {
for(var j = 0; j< _wp.length; j++){
_wp[j].style.display='none';
}
_wp[this.aa].style.display='block';
}
}
</script>
</html>
版权声明：本文为weixin_44808327原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。