您的位置：首页 > Web前端 > JavaScript

javascript的DOM学习之选项卡制作

2013-11-20 10:01 260 查看

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<style>
h3{
width: 100px;
height: 25px;
line-height: 25px;
float: left;
background: #333;
color: #fff;
margin: 0px;
padding: 0px;
border: 5px solid #fff;
}
.selecth3{
background: #fff;
color: #000;
}

#select:after{
content: "";
display: block;
width: 0px;
height: 0px;
clear: both;
}
#content{
padding-top: 20px;
width: 400px;
height: 300px;
background: #333;
color: #fff;
}
#content div{
display: none;
}
#content div:first-child{
display: block;

}

</style>

<body>
<div id="select">
<h3 onmouseover="show(0)" class="selecth3">选项一</h3>
<h3 onmouseover="show(1)">选项二</h3>
<h3 onmouseover="show(2)">选项三</h3>
</div>
<div id="content">
<div>
选项一选项一选项一选项一选项一选项一选项一选项一选项一选项一选项一选项一选项一
</div>
<div>
选项二选项二选项二选项二选项二选项二选项二选项二选项二选项二选项二选项二选项二
</div>
<div>
选项三选项三选项三选项三选项三选项三选项三选项三选项三选项三选项三选项三选项三
</div>
</div>
<script>
var ah3=document.getElementsByTagName('h3');

var contentget=document.getElementById('content').getElementsByTagName('div');

function show(num){

for(var i=0;i<ah3.length;i++)
{
if(i==num){
ah3[num].className="selecth3";
contentget[num].style.display="block";
}
else{
ah3[i].className=" ";
contentget[i].style.display="none";
}
}

}

</script>

</body>
</html>

演示：demo

主要是操作dom数组来操作相应的dom

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航