jQuery實現(xiàn)點擊后標記當前菜單位置(背景高亮菜單)效果
更新時間：2015年08月22日 10:14:55 作者：企鵝
這篇文章主要介紹了jQuery實現(xiàn)點擊后標記當前菜單位置(背景高亮菜單)效果,涉及jquery鼠標點擊事件及鏈式操作控制元素樣式動態(tài)變換的技巧,需要的朋友可以參考下
本文實例講述了jQuery實現(xiàn)點擊后標記當前菜單位置(背景高亮菜單)效果。分享給大家供大家參考。具體如下：
這是一款jquery菜單特效，點擊后高亮背景，個性的菜單特效。網(wǎng)上見到比較多的菜單了，不過像這樣這么簡單的方法來實現(xiàn)卻不多見，本菜單整體簡潔，點擊導航欄上的任意菜單項后，該菜單項的背景變成黑色，并且鼠標移走后，仍然固定保持黑色，記住了菜單的位置。
運行效果如下圖所示：
在線演示地址如下：
http://demo.jb51.net/js/2015/jquery-menu-set-focus-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>
<title>jquery點擊后高亮背景的菜單特效</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.9.1.min.js"></script>
<script>
$(function(){
var cotrs = $(".cotrs a");
cotrs.click(function(){
$(this).addClass("thisclass").siblings().removeClass("thisclass");
});
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>
希望本文所述對大家的jquery程序設計有所幫助。
您可能感興趣的文章:
- 基于jquery實現(xiàn)導航菜單高亮顯示（兩種方法）
- jQuery編輯器KindEditor4.1.4代碼高亮顯示設置教程
- jquery(1.3.2) 高亮選中圖片邊框
- Jquery 高亮顯示文本中重要的關鍵字
- jquery實現(xiàn)帶復選框的表格行選中刪除時高亮顯示
- jquery實現(xiàn)頁面關鍵詞高亮顯示的方法
- jQuery語法高亮插件支持各種程序源代碼語法著色加亮
- JQuery操作表格(隔行著色,高亮顯示,篩選數(shù)據(jù))
- jQuery實現(xiàn)當前頁面標簽高亮顯示的方法
- jQuery Json數(shù)據(jù)格式排版高亮插件json-viewer.js使用方法詳解
相關文章
MultiSelect左右選擇控件的設計與實現(xiàn)介紹
由于項目中用到左右選擇的控件，網(wǎng)上找了一些相關的實現(xiàn)，基本上有兩個:1、基于JQuery UI的控件2、某個兄弟手寫的一個控件,具體實現(xiàn)如下，感興趣的朋友可以參考下哈2013-06-06
這篇文章主要為大家介紹了易操作的jQuery表單提示插件，使用它可以輕松為表單控件添加淡入淡出動畫效果的提示，感興趣的小伙伴們可以參考一下2015-12-12
下面小編就為大家?guī)硪黄猨Query操作屬性和樣式詳解。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-04-04
這篇文章主要介紹了jQuery中:input選擇器用法,以實例形式較為詳細的分析了:input選擇器的功能、定義及匹配input元素時的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-01-01
好的代碼會帶來速度的提升，快速渲染和響應意味著更好的用戶體驗。本文主要總結了如何高效的編寫jQuery代碼的技巧，對提升你的jQuery和javascript代碼具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
jQuery實現(xiàn)Twitter的自動文字補齊特效
本文介紹了一款jQuery實現(xiàn)的文字自動補全特效的插件，該插件可以結合本地數(shù)據(jù)進行一些操作。推薦關注一下H5的幾種數(shù)據(jù)存儲的方式（localstorage與sessionstorage、IndexedDB、離線緩存manifest文件）2014-11-11
這篇文章主要介紹了jQuery居中元素scrollleft計算方法,結合實例形式分析了jQuery獲取及計算頁面滾動元素的相關操作技巧,需要的朋友可以參考下2017-01-01
前面性能優(yōu)化已經(jīng)說過，ID選擇器的速度是最快的。所以在HTML代碼中，能使用ID的盡量使用ID來代替class。2009-05-05
這篇文章主要給大家介紹了關于jquery兩種導入方式之本地導入和線上導入的相關資料,jQuery是一款JavaScript庫,封裝了JavaScript相關方法調(diào)用,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了jQuery進行組件開發(fā)的方法,以完整實例形式分析了基于jQuery實現(xiàn)自定義組件的相關技巧,代碼備有詳盡的注釋便于理解,需要的朋友可以參考下2015-12-12