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 相关文章推荐
iframe子父页面调用js函数示例
Nov 07 Javascript
js关于命名空间的函数实例
Feb 05 Javascript
jQuery通过扩展实现抖动效果的方法
Mar 11 Javascript
微信jssdk在iframe页面失效问题的解决措施
Mar 03 Javascript
JS中多种方式创建对象详解
Mar 22 Javascript
js获取元素的外链样式的简单实现方法
Jun 06 Javascript
node通过npm写一个cli命令行工具
Oct 12 Javascript
jquery实现左右轮播切换效果
Jan 01 jQuery
vue watch监听对象及对应值的变化详解
Feb 24 Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
Mar 06 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
Aug 20 Javascript
微信小程序网络请求实现过程解析
Nov 06 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调用MySQL的存储过程的实现代码
2008/08/12 PHP
PHP 防恶意刷新实现代码
2010/05/16 PHP
PHP中的多行字符串传递给JavaScript的两种方法
2014/06/19 PHP
ThinkPHP表单数据智能写入create方法实例分析
2015/09/27 PHP
解析PHP的Yii框架中cookie和session功能的相关操作
2016/03/17 PHP
PHP+Ajax 检测网络是否正常实例详解
2016/12/16 PHP
php常用字符函数实例小结
2016/12/29 PHP
php闭包中使用use声明变量的作用域实例分析
2018/08/09 PHP
浅谈laravel orm 中的一对多关系 hasMany
2019/10/21 PHP
浅谈javascript的原型继承
2012/07/25 Javascript
jquery控制select的text/value值为选中状态
2014/06/03 Javascript
javascript创建函数的20种方式汇总
2015/06/23 Javascript
JavaScript类型系统之Object详解
2016/01/07 Javascript
js验证框架之RealyEasy验证详解
2016/06/08 Javascript
JavaScript中数组的22种方法必学(推荐)
2016/07/20 Javascript
AngularJS表单验证中级篇(3)
2016/09/28 Javascript
BootStrapTable服务器分页实例解析
2016/12/20 Javascript
AngularJS表单提交实例详解
2017/02/18 Javascript
js前端日历控件(悬浮、拖拽、自由变形)
2017/03/02 Javascript
关于redux-saga中take使用方法详解
2018/02/27 Javascript
JS获取月的第几周和年的第几周实例代码
2018/12/05 Javascript
浅谈Vue.use到底是什么鬼
2020/01/21 Javascript
浅谈python中copy和deepcopy中的区别
2017/10/23 Python
pyqt5 实现工具栏文字图片同时显示
2019/06/13 Python
详解python深浅拷贝区别
2019/06/24 Python
使用Python为中秋节绘制一块美味的月饼
2019/09/11 Python
Python数据可视化:顶级绘图库plotly详解
2019/12/07 Python
美国餐厅用品和厨房设备批发网站:KaTom Restaurant Supply
2018/01/27 全球购物
意大利在线高尔夫商店:Online Golf
2021/03/09 全球购物
Eclipse面试题
2014/03/22 面试题
过程装备与控制工程专业个人的求职信
2013/12/01 职场文书
实习自我评价怎么写
2013/12/02 职场文书
实习生求职自荐信
2014/02/07 职场文书
酒店管理毕业生自我鉴定
2014/03/02 职场文书
校本培训个人总结
2015/02/28 职场文书
Ruby处理YAML和json数据
2022/04/18 Ruby