快捷導(dǎo)航

jQuery實(shí)現(xiàn)帶延遲的二級(jí)tab切換下拉列表效果

更新時(shí)間：2015年09月01日 12:40:39 作者：企鵝

這篇文章主要介紹了jQuery實(shí)現(xiàn)帶延遲的二級(jí)tab切換下拉列表效果,涉及jquery鼠標(biāo)事件及頁(yè)面元素樣式動(dòng)態(tài)變換的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了jQuery實(shí)現(xiàn)帶延遲的二級(jí)tab切換下拉列表效果。分享給大家供大家參考。具體如下：

這是一款基于jQuery實(shí)現(xiàn)帶延時(shí)效果的下拉列表菜單，有動(dòng)畫(huà)效果。

運(yù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>二級(jí)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>

希望本文所述對(duì)大家的jquery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

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