jquery導(dǎo)航制件jquery鼠標(biāo)經(jīng)過(guò)變色效果示例
<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;float:left;}
#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="/jquery-1.10.2.min.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="http://www.fzitv.net" >首頁(yè)</a></li><li><a href="http://www.fzitv.net/a/" >品牌商機(jī)</a></li>
<li><a href="http://www.fzitv.net/" >精品商機(jī)</a></li><li><a href="http://www.fzitv.net/" >最新商機(jī)</a></li>
<li><a href="http://www.fzitv.net/" >投資考察會(huì)</a></li><li><a href="http://www.fzitv.net/" >在線交流區(qū)</a></li>
</ul>
</div>
</body>
</html>
相關(guān)文章
jQuery實(shí)現(xiàn)文本顯示一段時(shí)間后隱藏的方法分析
這篇文章主要介紹了jQuery實(shí)現(xiàn)文本顯示一段時(shí)間后隱藏的方法,結(jié)合實(shí)例形式分析了jQuery事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-06-06
JQuery開(kāi)發(fā)的數(shù)獨(dú)游戲代碼
08年的時(shí)候裝上ubuntu試用了一下，發(fā)現(xiàn)里面自帶了一個(gè)數(shù)獨(dú)游戲，索性自己用jquery做了一個(gè)數(shù)獨(dú)游戲。2010-10-10
flag和jq on 的綁定多個(gè)對(duì)象和方法(必看)
下面小編就為大家?guī)?lái)一篇flag和jq on 的綁定多個(gè)對(duì)象和方法(必看)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
jQuery文本框(input textare)事件綁定方法教程
jquery的事件綁定已經(jīng)用on替換了原來(lái)的bind，接下來(lái)為大家分享下bind的使用方法及input textare事件2013-04-04
簡(jiǎn)單的按鈕js事件 用于判斷和顯示提示2011-05-05
jQuery-ui引入后Vs2008的無(wú)智能提示問(wèn)題解決方法
引入jQuery-vsdoc文件后，jQuery庫(kù)就能智能提示了，解決方法很簡(jiǎn)單在jQuery-ui的目錄下再加入一個(gè)空的JS文件，命名jquery-ui-vsdoc.js2014-02-02
EasyUI中datagrid在ie下reload失敗解決方案
這篇文章主要介紹了EasyUI中datagrid在ie下reload失敗解決方案，結(jié)合網(wǎng)上搜集來(lái)的幾種方案，最終解決了這個(gè)問(wèn)題，分享給大家，希望對(duì)大家能夠有所幫助。2015-03-03
使用BootStrap和Metroui設(shè)計(jì)的metro風(fēng)格微網(wǎng)站或手機(jī)app界面
今天使用bootstrap和metroui設(shè)計(jì)了一個(gè)metro風(fēng)格的移動(dòng)app或者微信微網(wǎng)站的界面，非常不錯(cuò)具有參考借鑒價(jià)值，感興趣的朋友可以參考下2016-10-10
基于JQuery實(shí)現(xiàn)相同內(nèi)容合并單元格的代碼
我們就中和下利用JQuery來(lái)和他一個(gè)table里面相同內(nèi)容的單元格，這里代碼跟大家分享下，希望對(duì)大家有用2011-01-01
這篇文章主要介紹了jQuery中find()方法用法,實(shí)例分析了find()方法的功能、定義及獲取匹配元素后代元素的使用技巧,需要的朋友可以參考下2015-01-01