jQuery實(shí)現(xiàn)點(diǎn)擊后高亮背景固定顯示的菜單效果【附demo源碼下載】
本文實(shí)例講述了jQuery實(shí)現(xiàn)點(diǎn)擊后高亮背景固定顯示的菜單效果。分享給大家供大家參考,具體如下:
<!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>jquery實(shí)現(xiàn)點(diǎn)擊后高亮背景的菜單特效</title> <style> *{ margin:0; padding:0; list-style:none;} body{ font:normal 14px/24px 'MicroSoft YaHei';} .cotrs{ width:960px; height:32px; line-height:32px; background:#999; margin:0 auto;} .cotrs a{ height:32px; line-height:32px; color:#fff; text-decoration:none; padding:0px 10px; display:block; float:left;} .cotrs a:hover{ text-decoration:none; background:#000;} .cotrs a.thisclass{text-decoration:none; background:#000;} </style> </head> <body> <br><br><br> <div class="cotrs"> <a href='javascript:' class="thisclass">首頁</a> <a href='javascript:'>菜單導(dǎo)航</a> <a href='javascript:'>時(shí)間日期</a> <a href='javascript:'>焦點(diǎn)圖</a> <a href='javascript:'>tab標(biāo)簽</a> <a href='javascript:'>jquery特效</a> <a href='javascript:'>在線客服</a> <a href='javascript:'>廣告代碼</a> <a href='javascript:'>相冊(cè)代碼</a> <a href='javascript:'>圖片特效</a> <a href='javascript:'>名站特效</a> <a href='javascript:'>其他代碼</a> <a href='javascript:'>HTML5</a> </div> <script src="jquery-1.7.2.min.js"></script> <script> $(function(){ var cotrs = $(".cotrs a"); cotrs.click(function(){ $(this).addClass("thisclass").siblings().removeClass("thisclass"); }); }); </script> </body> </html>
運(yùn)行效果圖如下:
完整實(shí)例代碼點(diǎn)擊此處本站下載。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery切換特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- php+jQuery實(shí)現(xiàn)的三級(jí)導(dǎo)航欄下拉菜單顯示效果
- jQuery實(shí)現(xiàn)的點(diǎn)擊顯示隱藏下拉菜單功能完整示例
- jQuery實(shí)現(xiàn)菜單的顯示和隱藏功能示例
- jQuery實(shí)現(xiàn)可高亮顯示的二級(jí)CSS菜單效果
- jquery實(shí)現(xiàn)在網(wǎng)頁指定區(qū)域顯示自定義右鍵菜單效果
- jquery實(shí)現(xiàn)鼠標(biāo)經(jīng)過顯示下劃線的漸變下拉菜單效果代碼
- jquery實(shí)現(xiàn)鼠標(biāo)滑過顯示二級(jí)下拉菜單效果
- 基于jquery實(shí)現(xiàn)導(dǎo)航菜單高亮顯示(兩種方法)
- 鼠標(biāo)懸浮顯示二級(jí)菜單效果的jquery實(shí)現(xiàn)
- jquery實(shí)現(xiàn)下拉菜單的二級(jí)聯(lián)動(dòng)利用json對(duì)象從DB取值顯示聯(lián)動(dòng)
- 基于jquery實(shí)現(xiàn)后臺(tái)左側(cè)菜單點(diǎn)擊上下滑動(dòng)顯示
- jQuery實(shí)現(xiàn)菜單顯示效果
相關(guān)文章
jquery 實(shí)現(xiàn)二級(jí)/三級(jí)/多級(jí)聯(lián)動(dòng)菜單的思路及代碼
jQuery的AJAX功能和asp.net來實(shí)現(xiàn)省市區(qū)的三級(jí)聯(lián)動(dòng)效果,其他二級(jí)、三級(jí)或多級(jí)聯(lián)動(dòng)也可以按照此方法完成,由此需求的朋友可以參考下哈,希望可以幫助到你2013-04-04jQuery動(dòng)態(tài)生成Bootstrap表格
這篇文章主要介紹了jQuery動(dòng)態(tài)生成bootstrap表格的相關(guān)資料,非常不錯(cuò)具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2016-11-11web的各種前端打印方法之jquery打印插件jqprint實(shí)現(xiàn)網(wǎng)頁打印
本文介紹JQuery插件Jqprint實(shí)現(xiàn)網(wǎng)頁打印,不懂的同學(xué)正可借此機(jī)會(huì)學(xué)習(xí)下,以備不時(shí)之需,話不多說,切入主題2013-01-01JQuery常見節(jié)點(diǎn)操作實(shí)例分析
這篇文章主要介紹了JQuery常見節(jié)點(diǎn)操作,結(jié)合實(shí)例形式分析了jQuery針對(duì)元素節(jié)點(diǎn)的添加、刪除常見操作函數(shù)使用技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2019-05-05基于jQuery實(shí)現(xiàn)照片墻自動(dòng)播放特效
這篇文章主要為大家詳細(xì)介紹了基于jQuery實(shí)現(xiàn)照片墻自動(dòng)播放特效,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01jQuery實(shí)現(xiàn)菜單欄導(dǎo)航效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡單菜單欄導(dǎo)航效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08$.each遍歷對(duì)象、數(shù)組的屬性值并進(jìn)行處理
通過$.each,可以遍歷對(duì)象、數(shù)組的屬性值并進(jìn)行處理,下面有個(gè)示例,需要的朋友可以參考下2014-07-07