鼠標(biāo)移到導(dǎo)航當(dāng)前位置的LI變色處于選中狀態(tài)
更新時(shí)間：2013年08月23日 18:16:41 作者：
本文所要實(shí)現(xiàn)的效果廣泛應(yīng)用于當(dāng)前導(dǎo)航,主要表現(xiàn)為鼠標(biāo)移到導(dǎo)航上面當(dāng)前的LI變色，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下，希望對大家有所幫助
鼠標(biāo)移到導(dǎo)航上面 當(dāng)前的LI變色 處于當(dāng)前的位置，廣泛應(yīng)用于當(dāng)前導(dǎo)航。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<title>鼠標(biāo)移到導(dǎo)航上面 當(dāng)前的LI變色 處于當(dāng)前的位置</title>
<style type="text/css">
ul,li{list-style:none;}
#nav li{display:inline-block;margin:0 5px;background:#ccc;padding:0 10px; line-height:24px;font-size:12px;}
#nav li.h_nav_over{background:red;color:#fff;}
#nav li.h_nav_over a{color:#fff;}
a{text-decoration:none;}
</style>
<script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#nav>ul>li").mouseover(function(){
$("#nav>ul>li").each(function(i){
$(this).removeClass("h_nav_over");
});
$(this).addClass("h_nav_over");
}).mouseout(function(){
$(this).addClass("h_nav_over");
});
});
</script>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#" >首頁</a></li><li><a href="#" >品牌商機(jī)</a></li>
<li><a href="#" >精品商機(jī)</a></li><li><a href="#" >最新商機(jī)</a></li>
<li><a href="#" >投資考察會</a></li><li><a href="#" >在線交流區(qū)</a></li>
</ul>
</div>
</body>
</html>
復(fù)制代碼 代碼如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<title>鼠標(biāo)移到導(dǎo)航上面 當(dāng)前的LI變色 處于當(dāng)前的位置</title>
<style type="text/css">
ul,li{list-style:none;}
#nav li{display:inline-block;margin:0 5px;background:#ccc;padding:0 10px; line-height:24px;font-size:12px;}
#nav li.h_nav_over{background:red;color:#fff;}
#nav li.h_nav_over a{color:#fff;}
a{text-decoration:none;}
</style>
<script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#nav>ul>li").mouseover(function(){
$("#nav>ul>li").each(function(i){
$(this).removeClass("h_nav_over");
});
$(this).addClass("h_nav_over");
}).mouseout(function(){
$(this).addClass("h_nav_over");
});
});
</script>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#" >首頁</a></li><li><a href="#" >品牌商機(jī)</a></li>
<li><a href="#" >精品商機(jī)</a></li><li><a href="#" >最新商機(jī)</a></li>
<li><a href="#" >投資考察會</a></li><li><a href="#" >在線交流區(qū)</a></li>
</ul>
</div>
</body>
</html>
您可能感興趣的文章:
- 帶有定位當(dāng)前位置的百度地圖前端web api實(shí)例代碼
- iOS中定位當(dāng)前位置坐標(biāo)及轉(zhuǎn)換為火星坐標(biāo)的方法
- Android獲取當(dāng)前位置的經(jīng)緯度數(shù)據(jù)
- 在AngularJS中如何使用谷歌地圖把當(dāng)前位置顯示出來
- JS利用cookie記憶當(dāng)前位置的防刷新導(dǎo)航效果
- Android實(shí)現(xiàn)Service獲取當(dāng)前位置(GPS+基站)的方法
- thinkphp獲取欄目和文章當(dāng)前位置的方法
- thinkphp實(shí)現(xiàn)面包屑導(dǎo)航（當(dāng)前位置）例子分享
- 講解iOS開發(fā)中基本的定位功能實(shí)現(xiàn)
- iOS獲取到用戶當(dāng)前位置
相關(guān)文章
本篇文章主要介紹了解決ajax不能訪問本地文件問題（利用js跨域原理），具有一定的參考價(jià)值，有興趣的可以了解一下。2017-01-01
jquery監(jiān)控?cái)?shù)據(jù)是否變化(修正版)
jquery監(jiān)控?cái)?shù)據(jù)是否變化(修正版) 之前寫的那篇中存在許多bug，今天重新整理了一下。還請各位指教2011-04-04
在頁面上圖片比較多的時(shí)候，打開一張頁面必然引起與服務(wù)器大數(shù)據(jù)量的交互。尤其是對于高清晰的圖片，占了幾百K的空間。那么我們?nèi)绾尾拍芨淖冞@種狀況呢，這就是今天我們要探討的問題了。2015-03-03
jquery中ajax請求后臺數(shù)據(jù)成功后既不執(zhí)行success也不執(zhí)行error的完美解決方法
這篇文章主要介紹了jquery中ajax請求后臺數(shù)據(jù)成功后既不執(zhí)行success也不執(zhí)行error解決方法,需要的朋友可以參考下2017-12-12
Jquery選擇子控件"大于號"和" "區(qū)別介紹及使用示例
Jquery選擇子控件”>“：在給定的父元素下匹配所有的子元素；另一個就是在給定的祖先元素下匹配所有的后代元素，具體概述及使用示例如下，感興趣的朋友可以參考下哈2013-06-06
這篇文章主要介紹了jQuery中的val()的使用,需要的朋友可以參考下2014-02-02
關(guān)于JQuery($.load)事件的用法和分析
本篇文章小編為大家介紹，關(guān)于JQuery($.load)事件的用法與分析，有需要的朋友可以關(guān)注一下2013-04-04
jQuery實(shí)現(xiàn)textarea自動增長寬高的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)textarea自動增長寬高的方法,涉及jQuery針對鍵盤按鍵的響應(yīng)及頁面元素的動態(tài)操作技巧,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了jQuery操作事件,結(jié)合完整實(shí)例形式分析了jquery事件綁定、解綁、響應(yīng)、觸發(fā)等相關(guān)操作技巧,需要的朋友可以參考下2020-01-01
deferred對象就是jQuery的回調(diào)函數(shù)解決方案。在英語中，defer的意思是"延遲"，所以deferred對象的含義就是"延遲"到未來某個點(diǎn)再執(zhí)行。2016-09-09