jQuery實現(xiàn)帶延遲的二級tab切換下拉列表效果
更新時間：2015年09月01日 12:40:39 作者：企鵝
這篇文章主要介紹了jQuery實現(xiàn)帶延遲的二級tab切換下拉列表效果,涉及jquery鼠標事件及頁面元素樣式動態(tài)變換的實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了jQuery實現(xiàn)帶延遲的二級tab切換下拉列表效果。分享給大家供大家參考。具體如下：
這是一款基于jQuery實現(xiàn)帶延時效果的下拉列表菜單，有動畫效果。
運行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/jquery-delay-show-menu-style-codes/
具體代碼如下：
<!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程序設計有所幫助。
您可能感興趣的文章:
- 使用Ajax和Jquery配合數(shù)據(jù)庫實現(xiàn)下拉框的二級聯(lián)動的示例
- jquery基于layui實現(xiàn)二級聯(lián)動下拉選擇(省份城市選擇)
- 基于jquery實現(xiàn)二級聯(lián)動效果
- 幾種二級聯(lián)動案例（jQuery\Array\Ajax php）
- jQuery+JSON實現(xiàn)AJAX二級聯(lián)動實例分析
- jquery實現(xiàn)二級導航下拉菜單效果
- jquery實現(xiàn)簡單的二級導航下拉菜單效果
- jQuery實現(xiàn)可高亮顯示的二級CSS菜單效果
- 如何使用Jquery動態(tài)生成二級選項列表
相關文章
jQuery中的pushStack實現(xiàn)原理和應用實例
這篇文章主要介紹了jQuery中的pushStack實現(xiàn)原理和應用實例,pushStack是jQuery內(nèi)核中一個非常重要的函數(shù),許多jQuery內(nèi)部函數(shù)中都頻繁用到它,掌握這個函數(shù),有利于理解jQuery的運行原理,需要的朋友可以參考下2015-02-02
jquery ajaxfileupload異步上傳插件使用詳解
這篇文章主要為大家詳細介紹了jquery ajaxfileupload異步上傳插件的使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
jquery實現(xiàn)彈窗(系統(tǒng)提示框)效果
這篇文章主要為大家詳細介紹了jquery實現(xiàn)彈窗系統(tǒng)提示框效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
這篇文章主要介紹了jQuery1.8中的幾個小變化。需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
jQuery 移動端拖拽（模塊化開發(fā)，觸摸事件，webpack）
這篇文章主要介紹了jQuery 移動端拖拽（模塊化開發(fā)，觸摸事件，webpack）的相關資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-10-10
Jquery中的val(),text(),html()是對javascrip中的value、innerText、innerHtml三個屬性的封裝2011-01-01
這篇文章主要介紹了jQuery EasyUI開發(fā)技巧總結的相關資料,希望通過本文大家能夠掌握EasyUI的開發(fā)技巧，需要的朋友可以參考下2017-09-09
這篇文章主要介紹了jQuery模擬select實現(xiàn)下拉菜單功能,比較實用,需要的朋友可以參考下。2016-06-06
這篇文章主要為大家詳細介紹了jQuery拖拽通過八個點改變div大小，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
本篇文章主要是對jquery選擇器之基本過濾選擇器進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01