jQuery实现带延迟的二级tab切换下拉列表效果


Posted in Javascript onSeptember 01, 2015

本文实例讲述了jQuery实现带延迟的二级tab切换下拉列表效果。分享给大家供大家参考。具体如下:

这是一款基于jQuery实现带延时效果的下拉列表菜单,有动画效果。

运行效果截图如下:

jQuery实现带延迟的二级tab切换下拉列表效果

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>二级tab切换</title>
<style type="text/css">
 *{margin:0;padding:0;}
 body{padding:10px ;}
 #div1{background:#333;height:30px;width:400px;margin:0 0 10px 0;}
 #div1 li { width: 100px; float:left;line-height:30px; background: 333; margin:0 5px;list-style:none; text-align: center;}
 #div1 li a { color:#fff; text-decoration:none;font-size:12px; display:block;}
 #div1 li a:hover { text-decoration:underline;}
 #div1 li span { display: none;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
</head>
<body>
 <div id="div1">
   <ul id="nav">
    <li>
    <a href="#">menu1</a>
    <span><a href="#">111</a></span>
    </li>
    <li>
    <a href="#">menu2</a>
    <span><a href="#">222</a></span>
    </li>
    <li>
    <a href="#">menu3</a>
    <span><a href="#">CopyRight@</a></span>
    </li>
    </ul>
  </div>
</body>
<script type="text/javascript">
 $(document).ready(function() { 
 $("ul#nav li").hover(function() { //Hover over event on list item
 $(this).find("span").show(200).css({ 'background' : '#1376c9','display' : 'block'}); //Show the subnav
 } , function() { //on hover out...
 $(this).find("span").hide(200); //Hide the subnav
 });
 });
</script>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 一道字符串分解的题目
Aug 03 Javascript
jQuery中after的两种用法实例
Jul 03 Javascript
Bootstrap Fileinput文件上传组件用法详解
May 10 Javascript
浅谈String.valueOf()方法的使用
Jun 06 Javascript
单击按钮发送验证码,出现倒计时的简单实例
Mar 17 Javascript
bootstrapvalidator之API学习教程
Jun 29 Javascript
phantomjs导出html到pdf的方法总结
Oct 19 Javascript
D3.js实现简洁实用的动态仪表盘的示例
Apr 04 Javascript
解决axios会发送两次请求,有个OPTIONS请求的问题
Oct 25 Javascript
vue自定义指令和动态路由实现权限控制
Aug 28 Javascript
谈谈JavaScript令人迷惑的==与+
Aug 31 Javascript
关于javascript中的promise的用法和注意事项(推荐)
Jan 15 Javascript
js实现具有高亮显示效果的多级菜单代码
Sep 01 #Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
Sep 01 #Javascript
JS实现黑客帝国文字下落效果
Sep 01 #Javascript
JavaScript中this详解
Sep 01 #Javascript
基于JavaScript制作霓虹灯文字 代码 特效
Sep 01 #Javascript
jquery实现简单合拢与展开网页面板的方法
Sep 01 #Javascript
jQuery实现可高亮显示的二级CSS菜单效果
Sep 01 #Javascript
You might like
汉字转化为拼音(php版)
2006/10/09 PHP
PHP daddslashes 使用方法介绍
2012/10/26 PHP
php实现向javascript传递数组的方法
2015/07/27 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
设定php简写功能的方法
2019/11/28 PHP
List Information About the Binary Files Used by an Application
2007/06/18 Javascript
让你的网站可编辑的实现js代码
2009/10/19 Javascript
JavaScript 未结束的字符串常量常见解决方法
2010/01/24 Javascript
firebug的一个有趣现象介绍
2011/11/30 Javascript
利用ajaxfileupload插件实现文件上传无刷新的具体方法
2013/06/08 Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
2015/06/05 Javascript
基于jquery实现全屏滚动效果
2015/11/26 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
2016/05/27 Javascript
Bootstrap与Angularjs的模态框实例代码
2017/08/03 Javascript
js获取文件里面的所有文件名(实例)
2017/10/17 Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
2019/05/13 Javascript
Vue侦测相关api的实现方法
2019/05/22 Javascript
jQuery实现移动端笔触canvas电子签名
2020/05/21 jQuery
微信小程序实现点赞业务
2021/02/10 Javascript
[01:00:11]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第一场 2月7日
2021/03/11 DOTA
使用python实现扫描端口示例
2014/03/29 Python
用Python实现web端用户登录和注册功能的教程
2015/04/30 Python
Python+Django搭建自己的blog网站
2018/03/13 Python
Python实现读取Properties配置文件的方法
2018/03/29 Python
python 输出上个月的月末日期实例
2018/04/11 Python
Python简单过滤字母和数字的方法小结
2019/01/09 Python
python 图片二值化处理(处理后为纯黑白的图片)
2019/11/01 Python
解决python使用list()时总是报错的问题
2020/05/05 Python
Python无损压缩图片的示例代码
2020/08/06 Python
教师辞职报告范文
2014/01/20 职场文书
安全协议书范本
2014/04/21 职场文书
2014年教育培训工作总结
2014/12/08 职场文书
详解如何使用Node.js实现热重载页面
2021/05/06 Javascript
Pytorch中的数据集划分&正则化方法
2021/05/27 Python
Java数据结构之链表相关知识总结
2021/06/18 Java/Android
python编程项目中线上问题排查与解决
2021/11/01 Python