<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body,ul{ margin: 0; padding: 0;}
li{list-style: none;}
a{text-decoration: none;}
.clearfix:after{content: ""; display: block; clear: both;}
.clearfix{zoom: 1;}
#list{width: 400px; margin: 100px auto 0; font-size: 14px; font-family: "微软雅黑";}
#list>li{width: 100px; background: #ccc; float: left;}
#list .active{background: red;}
#list a{color: #333;display: block;}
#list li{height: 30px; line-height: 30px; text-align: center;}
#list ul{display: none;}
#list ul li{width: 120px; background: green; margin-bottom: 5px;}
#list ul li:hover{background: yellow;}
</style>
</head>
<body>
<ul id="list" class="clearfix">
<li class="active">
<a href="">登录</a>
<ul style="display: block;">
<li><a href="">11</a></li>
<li><a href="">22</a></li>
<li><a href="">33</a></li>
<li><a href="">44</a></li>
</ul>
</li>
<li>
<a href="">微博</a>
<ul>
<li><a href="">11</a></li>
<li><a href="">22</a></li>
<li><a href="">33</a></li>
<li><a href="">44</a></li>
</ul>
</li>
<li>
<a href="">博客</a>
<ul>
<li><a href="">11</a></li>
<li><a href="">22</a></li>
<li><a href="">33</a></li>
<li><a href="">44</a></li>
</ul>
</li>
<li>
<a href="">邮箱</a>
<ul>
<li><a href="">11</a></li>
<li><a href="">22</a></li>
<li><a href="">33</a></li>
<li><a href="">44</a></li>
</ul>
</li>
</ul>
<script>
var oList=document.getElementById('list');
var aLi=oList.children;
var aUl=oList.getElementsByTagName('ul');
var len=aLi.length;
for(var i=0;i<len;i++){
aLi[i].index=i;
aLi[i].onmouseover=function(){
for(var i=0;i<len;i++){
aLi[i].className='';
aUl[i].style.display='none';
}
this.className='active';
aUl[this.index].style.display='block';
}
}
</script>
</body>
</html>
博客列表 >tab切换效果
tab切换效果
- syqaily的博客原创转载
- 2017年08月08日 11:39:08789浏览
上一条：PHP学习方法，编程的自学方法下一条：HTML5本地存储详解
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议