一、实现原理：

使用定时器和排他思想完成

二、代码：

<!DOCTYPE html>

<html>

<head>

<title></title>

<style type="text/css">

*{margin: 0;padding: 0}

ul,li{list-style: none;}

.main{ width: 400px; height: 50px; float: left; margin-top: 10px; margin-bottom: 10px; }

.main ul li{display: block;float: left; width: 100px; height: 50px;line-height: 50px; text-align: center; font-size: 12px; cursor: pointer; border: 1px solid #f2f2f2;box-sizing: border-box;}

.main ul li.active{ background:orange; color: #fff; }

.item{display: none; width: 400px; height: 50px;font-size: 12px; line-height:50px; overflow: hidden;clear: both; background: #f2f2f2;}

.item ul li{display: block;float: left; width: 100px; height: 50px;line-height: 50px; text-align: center; font-size: 12px; cursor: pointer;}

.item ul li:hover{ background:blue; color: #fff; }

</style>

</head>

<body>

<div class="main">

<ul>

<li>首页</li>

<li>关于我们</li>

<li>企业资讯</li>

<li>人才招聘</li>

</ul>

</div>

<div class="item">

<ul>

<li>选项1</li>

<li>选项2</li>

<li>选项3</li>

</ul>

</div>

<div class="item">

<ul>

<li>我们1</li>

<li>我们2</li>

<li>我们3</li>

</ul>

</div>

<div class="item">

<ul>

<li>企业1</li>

<li>企业2</li>

<li>企业3</li>

</ul>

</div>

<div class="item">

<ul>

<li>招聘1</li>

<li>招聘2</li>

<li>招聘3</li>

</ul>

</div>

<script type="text/javascript">

window.onload = function(){

var mainlis = document.querySelector('.main').querySelectorAll('li');

var items = document.querySelectorAll('.item');

var timer = null;

for (var i = 0; i < mainlis.length; i++) {

mainlis[i].index = i;

mainlis[i].onmouseover = function(){

clearTimeout(timer);

//排他思想，把所有的li去掉当前状态 把所有的item隐藏

for (var j = 0; j < mainlis.length; j++) {

mainlis[j].className = '';

items[j].style.display = 'none';

}

this.className = 'active';

items[this.index].style.display = 'block';

}

items[i].onmouseover = function(){

clearTimeout(timer);

}

mainlis[i].onmouseout = items[i].onmouseout = hide;

}

function hide(){

timer = setTimeout(function(){

for (var j = 0; j < mainlis.length; j++) {

items[j].style.display = 'none';

mainlis[j].className = '';

}

},300)

}

}

</script>

</body>

</html>

最新文章

  1. swift -- 学习记录
  2. Maven 系列 二 ：Maven 常用命令，手动创建第一个 Maven 项目【转】
  3. 【转】代码编辑器（一）-TSynCompletionProposal用法
  4. Android Studio如何快速生成get，set，tostring，构造函数
  5. oracle 字段上下两条记录的相减
  6. hdu 4107当卡段树
  7. Https 客户端与服务器交互过程梳理（转）
  8. Emacs配置（考场必备）（Emacs）
  9. thinkphp实现文件上传
  10. python 获取秒级时间间隔
  11. 虚拟机Linux不能上网简单有效的解决办法
  12. jQuery AJAX方法 前台往后台传数据
  13. WIN10平板 传递优化文件能否删除
  14. Nginx的基础配置管理
  15. JDK5.0 特性线程 同步装置之CountDownLatch 同步装置之CyclicBarrier 线程 BlockingQueue
  16. YII之yiic创建YII应用
  17. C基本语句和运算符
  18. 面试7 GC机制中如何判断一个对象是否任在使用
  19. 【操作系统】C语言编写的FAT16文件系统
  20. python opencv3 轮廓检测

热门文章

  1. HDU 1051
  2. 我来教你用AWS IoT.Part1--配置和接入
  3. H3C OSPF协议分区域管理
  4. python类中的双下划线方法
  5. Django入门6--Django超链接
  6. java.lang.IllegalArgumentException: attempt to create saveOrUpdate event with null entity
  7. &lt;Standard Template Library&gt;标准模板库专项复习总结（一）
  8. How to output the target message in dotnet build command line
  9. spring-redis-session 自定义 key 和过期时间
  10. golang实现依赖注入