js实现简单的选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>
Document
</title>
</meta>
</head>
<style>
.nav span{border: 1px solid #000;
}
.nav1{background-color: pink;}
.nav span:hover{cursor: pointer;}
.div1{display: none;
width:186px;
height: 100px;
border: 1px solid #000;
}
.div1:first-child{display: block;
}
</style>
<body>
<div class="nav">
<span class="nav1">
选项卡1
</span>
<span>
选项卡2
</span>
<span>
选项卡3
</span>
</div>
<div id="container">
<div class="div1">
<span>
我是第一个
</span>
</div>
<div class="div1">
<span>
我是第二个
</span>
</div>
<div class="div1">
<span>
我是第三个
</span>
</div>
</div>
<script>
window.onload = function() {
var nav = document.getElementsByTagName("span")
var oDiv = document.getElementsByClassName("div1")
for(var i=0;i<nav.length;i++){
nav[i].index = i
nav[i].onclick=function(){
for( var i=0;i<oDiv.length;i++){
oDiv[i].style.display = 'none'
nav[i].className = ''
}
this.className='nav1'
oDiv[this.index].style.display = "block"
}
}
}
</script>
</body>
</html>
浙公网安备 33010602011771号