<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 开始书写css代码 -->
<style>
*{margin:0;padding:0;}
.box {
width: 400px;
height: 350px;
margin: 0 auto;
}
#tab {
margin-top: 150px;
}
.box p {
height: 40px;
}
.box span {
display: block;
width: 97px;
height: 40px;
float: left;
text-align: center;
line-height: 40px;
cursor: pointer;
}
.current {
background-color: pink;
}
.box div{
width: 400px;
height: 260px;
background: pink;
display: none;
}
.box div.show {
display: block;
}
</style>
<!-- 开始书写js代码 -->
<script>
window.onload = function (){
// 使用函数进行封装
function fn(obj){
// 获取外面的大盒子
var target = document.getElementById(obj);
// 获取大盒子下面的span元素
var spans = target.getElementsByTagName('span');
// 获取大盒子下面的div元素
var divs = target.getElementsByTagName('div');
// 使用for循环进行遍历
for(var i=0;i<spans.length;i++){
// 获取索引值
spans[i].index = i;
// 鼠标移上切换相应的内容
spans[i].onmouseover = function (){
for(var i = 0;i<spans.length;i++){
// 大盒子下面的span,div元素的类名为空
spans[i].className = '';
divs[i].className = '';
}
// 当前移入的元素加上current类名
this.className = 'current';
// 给相应的div元素加上show类名
divs[this.index].className = 'show';
}
}
}
// 调用该函数
fn('tab');
}
</script>
</head>
<body>
<div class="box" id="tab">
<p>
<span class="current">新闻</span>
<span>图片</span>
<span>娱乐</span>
<span>星座</span>
</p>
<div class="show">新闻栏目</div>
<div>图片栏目</div>
<div>娱乐栏目</div>
<div>星座栏目</div>
</div>
</body>
</html>
转载于:https://my.oschina.net/homboyWeb/blog/886319
262
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
