利用js实现切换
案例分析:
四个小标题,当鼠标经过时,颜色以及盒子2里面的内容发生变化,盒子在初始状态下默认为首个标题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 400px;
height: 400px;
border: 1px solid gray;
margin: 100px auto;
overflow: hidden;
}
.hd{
height:50px;
}
.hd span{
display: inline-block;
width: 90px ;
height: 50px;
line-height: 50px;
background-color: pink;
text-align: center;
cursor: pointer;
}
.hd .current{
background-color: purple;
}
.bd div{
height: 350px;
background-color: purple;
display: none;
}
.bd .current{
display: block;
}
</style>
</head>
<body>
<div class ='box'>
<div class="hd" id = 'hd'>
<span class='current'>娱乐</span>
<span>新闻</span>
<span>体育</span>
<span>综艺</span>
</div>
<div class="bd" id="bd">
<div class="current">我是娱乐模块</div>
<div>我是新闻模块</div>
<div>我是体育模块</div>
<div>我是综艺模块</div>
</div>
</div>
</body>
<script type="text/javascript">
var hd = document.getElementById('hd');
var spans = hd.getElementsByTagName('span');
for(var i = 0; i< spans.length; i++){
var span = spans[i];
//自定义属性
span.setAttribute('index',i);
//注册事件
span.onmouseover =fn;
}
function fn(){
for(var i= 0; i< spans.length ; i++){
var span = spans[i];
span.className = '';
}
//让当前的span高亮显示
this.className = 'current';
//让当前span的内容显示,其他span的内容隐藏
var bd = document.getElementById('bd');
var divs = bd.getElementsByTagName('div');
for(var i = 0; i< divs.length;i++){
var div = divs[i];
div.className = '';
}
//获取自定义属性值
var index = parseInt(this.getAttribute('index'));
//切换tab
divs[index].className ='current';
}
</script>
</html>