abstract：<!DOCTYPE html><html><head> <title>切换</title> <style type="text/css"> &nb
<!DOCTYPE html>
<html>
<head>
<title>切换</title>
<style type="text/css">
*{margin: 0 auto;padding: 0;}
.tag{
width: 500px;
height: 300px;
background: red;
}
.tag .nav{
width: 500px;
height: 50px;
}
.tag .nav span{
width: 100px;
height: 50px;
float: left;
line-height: 50px;
text-align: center;
font-size: 12px;
background: pink;
cursor: pointer;
border-bottom: 1px solid #ccc;
}
.tag .nav span:hover{
font-size: 20px;
color: skyblue;
}
.tag .content{
width: 100%;
height: 250px;
background: #fff;
}
.tag .content div{
width: 500px;
height: 250px;
line-height: 250px;
text-align: center;
font-size: 40px;
font-weight: 300;
display: none;
}
</style>
<script type="text/javascript">
window.onload = function(){
var spanList = document.getElementsByTagName('span');
spanList[0].style.background = 'blue';
document.getElementById('content').getElementsByTagName('div')[0].style.display = 'block';
}
function changeTag(obj){
var num = obj.getAttribute('name');
var spanLen = document.getElementsByTagName('span');
console.log(spanLen);
for(var i=0;i<spanLen.length;i++){
if(i==num){
spanLen[i].style.background = 'deeppink';
spanLen[i].style.fontSize = '20px';
spanLen[i].style.color = 'skyblue';
document.getElementById('content').getElementsByTagName('div')[i].style.display = 'block';
}else{
spanLen[i].style.background = 'pink';
spanLen[i].style.fontSize = '12px';
spanLen[i].style.color = '#000';
document.getElementById('content').getElementsByTagName('div')[i].style.display = 'none';
}
}
}
</script>
</head>
<body>
<div class="tag">
<div class="nav">
<span name="0" onclick="changeTag(this)">首页</span>
<span name="1" onclick="changeTag(this)">书</span>
<span name="2" onclick="changeTag(this)">笔</span>
<span name="3" onclick="changeTag(this)">手机</span>
<span name="4" onclick="changeTag(this)">综电脑</span>
</div>
<div class="content" id="content">
<div style="background:pink;">11111111111</div>
<div style="background:lightblue;">222222222222222</div>
<div style="background:lightgray;">33333333333</div>
<div style="background:lightgreen;">4444444444444</div>
<div style="background:skyblue;">5555555555555</div>
</div>
</div>
</body>
</html>
Correcting teacher：查无此人Correction time：2019-05-22 09:18:21
Teacher's summary：完成的不错。js功能非常强大，要好好练习。继续加油。