jQuery+css實(shí)現(xiàn)非常漂亮的水平導(dǎo)航菜單效果
本文實(shí)例講述了jQuery+css實(shí)現(xiàn)非常漂亮的水平導(dǎo)航菜單效果。分享給大家供大家參考,具體如下:
運(yùn)行效果截圖如下:
用到的背景圖片tab.gif如下:
具體代碼如下:
<!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 runat="server"> <title>jQuery+css水平導(dǎo)航菜單</title> <script src="jquery-1.7.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $("ul>li").click(function() { $("ul>li").each(function() { $(this).removeClass("_lishow"); }); $(this).addClass("_lishow"); }); }); </script> <style type="text/css"> ul { list-style-type: none; border: 0px blue solid; height: 27px; width: 480px; } ul li { list-style-type: none; float: left; width: 74px; height: 27px; line-height: 27px; text-align: center; background-color: #CCCCFF; background: url(../images/tab.gif); background-position: -74px 0px; } ul li:hover { cursor: pointer; } ._lishow { background: url(../images/tab.gif); background-position: 0px 0px; } </style> </head> <body> <div> <ul> <li class="_lishow">Menu1</li> <li>Menu2</li> <li>Menu3</li> <li>Menu4</li> <li>Menu5</li> <li>Menu6</li> </ul> <br /> </div> </body> </html>
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery form操作技巧匯總》、《jQuery常用插件及用法總結(jié)》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- jQuery實(shí)現(xiàn)簡(jiǎn)單漂亮的Nav導(dǎo)航菜單效果
- jQuery和CSS仿京東仿淘寶列表導(dǎo)航菜單
- 基于jQuery實(shí)現(xiàn)火焰燈效果導(dǎo)航菜單
- jQuery縱向?qū)Ш讲藛涡Ч麑?shí)現(xiàn)方法
- jQuery+CSS3實(shí)現(xiàn)仿花瓣網(wǎng)固定頂部位置帶懸浮效果的導(dǎo)航菜單
- jQuery模仿京東/天貓商品左側(cè)分類導(dǎo)航菜單效果
- 原生js和jquery分別實(shí)現(xiàn)橫向?qū)Ш讲藛涡Ч?/a>
- jQuery+CSS實(shí)現(xiàn)一個(gè)側(cè)滑導(dǎo)航菜單代碼
- jquery實(shí)現(xiàn)具有收縮功能的垂直導(dǎo)航菜單
- 基于jQuery實(shí)現(xiàn)以手風(fēng)琴方式展開(kāi)和折疊導(dǎo)航菜單
- jQuery實(shí)現(xiàn)二級(jí)導(dǎo)航菜單的示例
相關(guān)文章
jquery簡(jiǎn)單實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)導(dǎo)航條改變背景圖
鼠標(biāo)經(jīng)過(guò)導(dǎo)航條改變背景圖的效果很是好看,下面為大家介紹下使用jquery是如何實(shí)現(xiàn)的,感興趣的朋友可以參考下2013-12-12Jquery實(shí)現(xiàn)的簡(jiǎn)單輪播效果【附實(shí)例】
下面小編就為大家?guī)?lái)一篇Jquery實(shí)現(xiàn)的簡(jiǎn)單輪播效果【附實(shí)例】。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考2016-04-04完美解決jQuery 鼠標(biāo)快速滑過(guò)后,會(huì)執(zhí)行多次滑出的問(wèn)題
下面小編就為大家?guī)?lái)一篇完美解決jQuery 鼠標(biāo)快速滑過(guò)后,會(huì)執(zhí)行多次滑出的問(wèn)題。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-12-12jquery實(shí)現(xiàn)點(diǎn)擊其他區(qū)域時(shí)隱藏下拉div和遮罩層的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)點(diǎn)擊其他區(qū)域時(shí)隱藏下拉div和遮罩層的方法,涉及jQuery響應(yīng)鼠標(biāo)事件動(dòng)態(tài)改變頁(yè)面元素樣式的功能,需要的朋友可以參考下2015-12-12jquery對(duì)復(fù)選框(checkbox)的操作匯總
本文給大家匯總介紹了一些jQuery操作復(fù)選框(checkbox)的方法和技巧,非常的簡(jiǎn)單實(shí)用,有需要的小伙伴可以參考下。2016-01-01動(dòng)態(tài)調(diào)用css文件——jquery的應(yīng)用
這篇文章主要介紹了動(dòng)態(tài)調(diào)用css文件——jquery的應(yīng)用2007-02-02jQuery中event.target和this的區(qū)別詳解
這篇文章主要介紹了jQuery中event.target和this的區(qū)別詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08jQuery之a(chǎn)jax技術(shù)的詳細(xì)介紹
本篇文章是對(duì)jQuery中的ajax技術(shù)進(jìn)行了詳細(xì)的分析介紹,需要的朋友參考下2013-06-06