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程序設計有所幫助。

您可能感興趣的文章:

相關(guān)文章

jQuery中append()方法用法實例
這篇文章主要介紹了jQuery中append()方法用法,實例分析了append()方法的功能、定義及在匹配元素的結(jié)尾插入指定內(nèi)容的使用技巧,需要的朋友可以參考下
2015-01-01
jquery根據(jù)一個值來選中select下的option實例代碼
下面小編就為大家?guī)硪黄猨query根據(jù)一個值來選中select下的option實例代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-08-08
Jquery遍歷checkbox獲取選中項value值的方法
這篇文章主要介紹了Jquery遍歷checkbox獲取選中項的value值,需要的朋友可以參考下
2014-02-02
jquery 將disabled的元素置為enabled的三種方法
在jquery中可以通過jqueryObj.attr("disabled","disabled")將頁面中某個元素置為不可編輯或觸發(fā)狀態(tài)，但是在jquery的API reference中并沒說明怎么將頁面置為disable的元素重新置為可觸發(fā)或可編輯的。
2009-07-07
Jquery中dialog屬性小記
Jquery中dialog屬性小記，使用jquery dialog的朋友可以參考下。
2010-09-09
jquery提示效果實例分析
這篇文章主要介紹了jquery提示效果,以一個簡單實例較為詳細的分析了jQuery提示效果的實現(xiàn)方法與相關(guān)注意事項,具有一定的參考借鑒價值,需要的朋友可以參考下
2014-11-11
使用JQuery在線制作ppt并在線演示源碼特效
本篇文章是基于JQuery在線制作的ppt在線演示，非常高大尚，效果非常好，需要的朋友可以參考下。
2015-09-09
使用jQuery處理AJAX請求的基礎學習教程
這篇文章主要介紹了使用jQuery處理AJAX請求的基礎學習教程,除此之外還引申了鏈式處理事件回調(diào)的寫法,由淺入深非常值得借鑒,需要的朋友可以參考下
2016-05-05
仿JQuery輸寫高效JSLite代碼的一些技巧
這篇文章主要介紹了仿JQuery輸寫高效JSLite代碼的一些技巧,本文計劃根據(jù)他人對jQuery總結(jié)的一些速度方面的技巧和一些建議,來教你提升你的JSLite和javascript代碼,需要的朋友可以參考下
2015-01-01
jquerymobile局部渲染的各種刷新方法小結(jié)
本篇文章主要是對jquerymobile局部渲染的各種刷新方法進行了總結(jié)介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-03-03