收藏
批改状态：合格
老师批语：以后不要这样提交, 把当天的全部作业写到一个博客中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tab切换</title>
<style>
*{
margin: 0;
padding: 0;
}
#box{
width: 500px;
height: 500px;
border: 1px solid aqua;
margin: 150px auto;
position: relative;
}
#box ul .lis{
width: 150px;
height: 60px;
background: #666;
list-style: none;
float: left;
margin-left: 13px;
color: white;
font-size: 24px;
text-align: center;
line-height: 60px;
}
#box ul .lis:hover{
font-size: 26px;
background: goldenrod;
position: relative;
top: -3px;
left: -1px;
}
#box .con{
width: 480px;
height: 420px;
position: absolute;
left: 10px;
top: 70px;
display: none;
}
#box .con li{
width: 100px;
height: 20px;
list-style: none;
margin-left: 30px;
margin-top: 50px;
background: black;
color: white;
text-align: center;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li class="lis">导航01</li>
<li class="lis">导航02</li>
<li class="lis">导航03</li>
</ul>
<div class="con" style="background: darkred;display: block;">
<ul>
<li>列表01</li>
<li>列表02</li>
<li>列表03</li>
</ul>
</div>
<div class="con" style="background: green;">
<ul>
<li>列表04</li>
<li>列表05</li>
<li>列表06</li>
</ul>
</div>
<div class="con" style="background: yellow;">
<ul>
<li>列表07</li>
<li>列表08</li>
<li>列表09</li>
</ul>
</div>
</div>
<script>
// 抓元素
var box = document.getElementById('box');
var lis = document.getElementsByClassName('lis');
var con = document.getElementsByClassName('con');
// 给li添加鼠标移入事件
for (var i=0;i<lis.length;i++) {
lis[i].xuhao = i;
lis[i].onmouseover = function(){
var x = this.xuhao;
for (var i=0;i<3;i++) {
con[i].style.display = 'none';
}
con[x].style.display = 'block';
}
}
</script>
</body>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
