jQuery實現(xiàn)點擊后高亮背景固定顯示的菜單效果【附demo源碼下載】
本文實例講述了jQuery實現(xià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實現(xià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:'>菜單導航</a> <a href='javascript:'>時間日期</a> <a href='javascript:'>焦點圖</a> <a href='javascript:'>tab標簽</a> <a href='javascript:'>jquery特效</a> <a href='javascript:'>在線客服</a> <a href='javascript:'>廣告代碼</a> <a href='javascript:'>相冊代碼</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>
運行效果圖如下:
完整實例代碼點擊此處本站下載。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery切換特效與技巧總結(jié)》、《jQuery擴展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設計有所幫助。
- php+jQuery實現(xiàn)的三級導航欄下拉菜單顯示效果
- jQuery實現(xiàn)的點擊顯示隱藏下拉菜單功能完整示例
- jQuery實現(xiàn)菜單的顯示和隱藏功能示例
- jQuery實現(xiàn)可高亮顯示的二級CSS菜單效果
- jquery實現(xiàn)在網(wǎng)頁指定區(qū)域顯示自定義右鍵菜單效果
- jquery實現(xiàn)鼠標經(jīng)過顯示下劃線的漸變下拉菜單效果代碼
- jquery實現(xiàn)鼠標滑過顯示二級下拉菜單效果
- 基于jquery實現(xiàn)導航菜單高亮顯示(兩種方法)
- 鼠標懸浮顯示二級菜單效果的jquery實現(xiàn)
- jquery實現(xiàn)下拉菜單的二級聯(lián)動利用json對象從DB取值顯示聯(lián)動
- 基于jquery實現(xiàn)后臺左側(cè)菜單點擊上下滑動顯示
- jQuery實現(xiàn)菜單顯示效果
相關(guān)文章
jquery 實現(xiàn)二級/三級/多級聯(lián)動菜單的思路及代碼
jQuery的AJAX功能和asp.net來實現(xiàn)省市區(qū)的三級聯(lián)動效果,其他二級、三級或多級聯(lián)動也可以按照此方法完成,由此需求的朋友可以參考下哈,希望可以幫助到你2013-04-04web的各種前端打印方法之jquery打印插件jqprint實現(xiàn)網(wǎng)頁打印
本文介紹JQuery插件Jqprint實現(xiàn)網(wǎng)頁打印,不懂的同學正可借此機會學習下,以備不時之需,話不多說,切入主題2013-01-01