上下箭头选中 选项事件 JS
效果图
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>
上下箭头选中 选项事件 JS的更多相关文章
- Vue.js之下拉列表及选中触发事件
老早就听说了Vue.js是多么的简单.易学.好用等等,然而我只是粗略的看了下文档,简单的敲了几个例子,仅此而已. 最近由于项目的需要,系统的看了下文档,也学到了一些东西. 废话不多说,这里要说的是下拉 ...
- 刷新各ifream当前页，下拉项改变触发事件js,给选中项加背景色js
<script type="text/javascript" language="javascript"> //刷新框架各页面 function r ...
- 网页定位点击事件js响应函数教程（Chrome）
一.背景说明 在前端页面调试或者渗透测试(尤其是XSS)时,我们经常想定位js函数位置:比如点击了某个位置弹出了一个对话框,这是哪个文件的哪个js函数在响应. 本文以Chrome浏览器定位点击事件响应 ...
- LayUI中select下拉框选中触发事件
代码: var form = layui.form, layer = layui.layer; // 监听 $(document).ready(function() { // select下拉框选中触 ...
- input选中 和 select点击下拉选择获取选中选项的值
1.input选中$('#checkBox').find('input').each(function(i){ if($(this).prop('checked')){//获取是否选中 并判断 $(t ...
- js jquery select 操作 获取值,选中选项,增加,修改,删除
select示例: <select id="sel"> <option value="1">one</option> < ...
- 实现 select中指定option选中触发事件
我们在用到下拉列表框select时,需要对选中的<option>选项触发事件,其实<option>本身没有触发事件方法,我们只有在select里的onchange方法里触发. ...
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...
- JS点击子元素不触发父元素点击事件(js阻止冒泡)
js阻止冒泡 <html> <title></title> <head> <meta charset="utf-8"> ...
随机推荐
- 【leetcode】Simplify Path
题目简述: Given an absolute path for a file (Unix-style), simplify it. For example, path = "/home/& ...
- threadid=1: thread exiting with uncaught exception (group=0xb2a86d70)
这个错误是程序运行成功,但是一在虚拟机上运行就报“停止运行了”,如图: 然后我们查看一个日志信息: 查了好久,终于 搞好了,原因是安卓目标SDK版本太高了,我这里创建好默认是这样的如图: 只要把21改 ...
- 数据库错误：check the manual that corresponds to your MySQL server version for the right sy
检查对应到您的MySQL服务器版本附近使用正确的语法手册 数据库插入的时候出现上述问题,总结了两方面原因: 1.语法错误,这是百度之得到的大部分结果,但是没有解决我的问题 2.仔细观察我的sql语句, ...
- NOIP2009分数线划定【B004】
[B004]分数线划定[难度B]—————————————————————————————————————————————————————————————————————————— [题目要求] 世博 ...
- LightOJ1171 Knights in Chessboard (II)（二分图最大点独立集）
题目 Source http://www.lightoj.com/volume_showproblem.php?problem=1171 Description Given an m x n ches ...
- Latex制作beamer
Latex制作beamer latex beamer Beamer Theme Matrix网页给出了一般常用的主题和配色方案. tuwcvl这个主题比较简单,感觉比较适合用作实验室内的报告,可以自己 ...
- JavaScript中的this指向
this是谁 技术一般水平有限,有什么错的地方,望大家指正. this代指当前对象super调用父类的构造函数,应表会运网数物,加载驱动建立链接执行SQL处理结果,直到现在每想起这三点就能想起我上大学 ...
- Codeforces Round B. Buttons
Manao is trying to open a rather challenging lock. The lock has n buttons on it and to open it, you ...
- js的三种继承方式及其优缺点
[转] 第一种,prototype的方式: //父类 function person(){ this.hair = 'black'; this.eye = 'black'; this.skin = ' ...
- 键盘和alertView的冲突问题
冲突现象: textField失去响应收键盘时,如果要弹出一个alertView警告框,就会出现一个现象:在点击了alertView上的事件后,在alertView消失后,会有短暂的出现键盘会再次弹出 ...