实例
<!DOCTYPE html>
<html>
<head>
<title>Tag切换</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 = 'deeppink';
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;">1</div>
<div style="background:lightblue;">2</div>
<div style="background:lightgray;">3</div>
<div style="background:lightgreen;">4</div>
<div style="background:skyblue;">5</div>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
