效果圖
JS代碼
//上下鍵 選擇事件 searchBackgroud 為樣式，只做標記，無實質樣式，因為和其他樣式不兼容，只能添加CSS $(document).keydown(function (event) { var upDownClickNum = $("#SearchTips .searchBackgroud ").length; if ($("#SearchTips").css("display") == "block") { alert(event.keyCode) //38:上 40:下 if (event.keyCode == 38) { if (upDownClickNum < 1) { $("#SearchTips li:last a").css({ "background": "#f0f0f0" }).addClass("searchBackgroud"); } else { $("#SearchTips .searchBackgroud ").removeClass("searchBackgroud").css({ "background": "" }).parent().prev().children().addClass("searchBackgroud").css({ "background": "#f0f0f0" }); } stopDefault(event);//不阻止光標戶向前移動 } else if (event.keyCode == 40) { if (upDownClickNum < 1) { $("#SearchTips li:first a").css({ "background": "#f0f0f0" }).addClass("searchBackgroud"); } else { $("#SearchTips .searchBackgroud").removeClass("searchBackgroud").css({ "background": "" }).parent().next().children().addClass("searchBackgroud").css({ "background": "#f0f0f0" }); } stopDefault(event); } upDownClickNum++; } }); //阻止事件執行 function stopDefault(e) { //阻止默認瀏覽器動作(W3C) if (e && e.preventDefault) { //火狐的 事件是傳進來的e e.preventDefault(); } //IE中阻止函數器默認動作的方式 else { //ie 用的是默認的event event.returnValue = false; } }
html代碼
<html> <head></head> <body> <ol id="SearchTips" class="search_list" style="display: none;"> <li> <a href="/VIEW/HouseSecond/HouseSecondList.html?r=1&c=138&rs=鳳凰北新村1區" onclick="ga('send', 'pageview', '1');">鼓樓 鳳凰北新村<span><b>1</b> </span>區 西江濱 待售(1) </a> </li> <li> <a href="/VIEW/HouseSecond/HouseSecondList.html?r=1&c=122&rs=鳳凰北新村1區" onclick="ga('send', 'pageview', '1');">鼓樓 鳳凰北新村<span><b>1</b> </span>區 萬寶商圈 待售(1) </a> </li> <li> <a href="/VIEW/HouseSecond/HouseSecondList.html?r=5&c=129&rs=怡美嘉園1期" onclick="ga('send', 'pageview', '1');">倉山 怡美嘉園<span><b>1</b> </span>期[怡美嘉園] 倉山步行街 待售(3)</a></li> <li> <a href="/VIEW/HouseSecond/HouseSecondList.html?r=5&c=146&rs=怡美嘉園1期" onclick="ga('send', 'pageview', '1');">倉山 怡美嘉園<span><b>1</b> </span>期[怡美嘉園] 三叉街 待售(3) </a></li> <li> <a href="/VIEW/HouseSecond/HouseSecondList.html?r=3&c=127&rs=福興花園1期" onclick="ga('send', 'pageview', '1');">晉安 福興花園<span><b>1</b> </span>期 鼓山新東區 待售(7)</a> </li> <li> <a href="/VIEW/HouseSecond/HouseSecondList.html?r=3&c=141&rs=福興花園1期" onclick="ga('send', 'pageview', '1');">晉安 福興花園<span><b>1</b> </span>期 福馬路 待售(7)</a></li> <li> <a href="/VIEW/HouseSecond/HouseSecondList.html?r=7&rs=融匯山水1期" onclick="ga('send', 'pageview', '1');">閩侯 融匯山水<span><b>1</b> </span>期 待售(32)</a></li> <li> <a href="/VIEW/HouseSecond/HouseSecondList.html?r=5&rs=振興花園1期">倉山 振興花園<span><b>1</b> </span>期 </a></li> <li> <a href="/VIEW/HouseSecond/HouseSecondList.html?r=3&c=155&rs=彩虹鋪景" onclick="ga('send', 'pageview', '1');">晉安 彩虹鋪景[隆盛小區 <span><b>1</b> </span>#樓] 五四路（溫泉公園） 待售(6)</a></li> <li> <a href="/VIEW/HouseSecond/HouseSecondList.html?r=3&c=142&rs=彩虹鋪景" onclick="ga('send', 'pageview', '1');">晉安 彩虹鋪景[隆盛小區 <span><b>1</b> </span>#樓] 火車站 待售(6) </a></li> </ol> </body> </html>