<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
*{
margin: 0;
padding: 0;
}
.test{
width: 1000px;
height: 1000px;
margin: 0 auto;
}
.test ul{
list-style: none;
margin: 0 auto;
display: flex;
justify-content: center;
}
.test ul li{
width: 100px;
float: left;
text-align: center;
}
.test p{
display: block;
cursor: pointer;
}
.box{
width: 1000px;
height: 300px;
background: #E7FB4A;
clear: both;
}
#box1{
background: #53FD5D;
}
#box2{
background: #F4FD53;
display: none;
}
#box3{
background: #FD7253;
display: none;
}
.test p:hover{
background: #4874FF;
}
.btn1{
background: : #5C47F3;
display: block;
}
.btn2{
background: #4874FF;
display: block;
}
</style>
</head>
<body>
<div class="test">
<ul>
<li><p id="1" class="btn2">导航一</p></li>
<li><p id="2" class="btn1">导航二</p></li>
<li><p id="3" class="btn1">导航三</p></li>
</ul>
<div class="box" id="box1">这是第一个导航显示的内容</div>
<div class="box" id="box2">这是第二个导航显示的内容</div>
<div class="box" id="box3">这是第三个导航显示的内容</div>
</div>
<script type="text/javascript">
window.onload = function(){
var arr = document.getElementsByTagName('p');
for(var i = 0;i<arr.length;i++){
arr[i].onclick = function(){
if (this.id == '1' )
{
document.getElementById("box1").style.display = 'block' ;
document.getElementById("box2").style.display = 'none' ;
document.getElementById("box3").style.display = 'none' ;
}
else if(this.id == '2')
{
document.getElementById("box1").style.display = 'none' ;
document.getElementById("box2").style.display = 'block' ;
document.getElementById("box3").style.display = 'none' ;
}
else{
document.getElementById("box1").style.display = 'none' ;
document.getElementById("box2").style.display = 'none' ;
document.getElementById("box3").style.display = 'block' ;
}
//this是当前激活的按钮，在这里可以写对应的操作
if(this.className == 'btn1'){
this.className = 'btn2';
var name = this.id;
var btn = document.getElementsByClassName('btn2');
for(var j=0;j<btn.length;j++){
if(btn[j].id!=name){
btn[j].className = 'btn1';
}
}
}
}
}
}
</script>
</body>
</html>
lan988 级别:管理员 + 关注 收藏
支持(0) | 
反对(0)原内容
顶端 
底部 
