上下箭头选中选项事件 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&amp;c=138&amp;rs=凤凰北新村1区" onclick="ga('send', 'pageview', '1');">鼓楼 凤凰北新村<span><b>1</b> </span>区 西江滨 待售(1) </a> </li>

   <li> <a href="/VIEW/HouseSecond/HouseSecondList.html?r=1&amp;c=122&amp;rs=凤凰北新村1区" onclick="ga('send', 'pageview', '1');">鼓楼 凤凰北新村<span><b>1</b> </span>区 万宝商圈 待售(1) </a> </li>

   <li> <a href="/VIEW/HouseSecond/HouseSecondList.html?r=5&amp;c=129&amp;rs=怡美嘉园1期" onclick="ga('send', 'pageview', '1');">仓山 怡美嘉园<span><b>1</b> </span>期[怡美嘉园] 仓山步行街 待售(3)</a></li>

   <li> <a href="/VIEW/HouseSecond/HouseSecondList.html?r=5&amp;c=146&amp;rs=怡美嘉园1期" onclick="ga('send', 'pageview', '1');">仓山 怡美嘉园<span><b>1</b> </span>期[怡美嘉园] 三叉街 待售(3) </a></li>

   <li> <a href="/VIEW/HouseSecond/HouseSecondList.html?r=3&amp;c=127&amp;rs=福兴花园1期" onclick="ga('send', 'pageview', '1');">晋安 福兴花园<span><b>1</b> </span>期 鼓山新东区 待售(7)</a> </li>

   <li> <a href="/VIEW/HouseSecond/HouseSecondList.html?r=3&amp;c=141&amp;rs=福兴花园1期" onclick="ga('send', 'pageview', '1');">晋安 福兴花园<span><b>1</b> </span>期 福马路 待售(7)</a></li>

   <li> <a href="/VIEW/HouseSecond/HouseSecondList.html?r=7&amp;rs=融汇山水1期" onclick="ga('send', 'pageview', '1');">闽侯 融汇山水<span><b>1</b> </span>期 待售(32)</a></li>

   <li> <a href="/VIEW/HouseSecond/HouseSecondList.html?r=5&amp;rs=振兴花园1期">仓山 振兴花园<span><b>1</b> </span>期 </a></li>

   <li> <a href="/VIEW/HouseSecond/HouseSecondList.html?r=3&amp;c=155&amp;rs=彩虹铺景" onclick="ga('send', 'pageview', '1');">晋安 彩虹铺景[隆盛小区 <span><b>1</b> </span>#楼] 五四路（温泉公园） 待售(6)</a></li>

   <li> <a href="/VIEW/HouseSecond/HouseSecondList.html?r=3&amp;c=142&amp;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"> ...

随机推荐

C# RFID windows 服务网络协议方式
上篇话说是串口方式操作RFID设备. 下面介绍网络协议方式. 设备支持断线重连. 那我们的服务也不能差了不是. 所以这个服务类也是支持的哦. 不解释上代码: namespace Rfid { /// ...
haohantech浩瀚盘点机“PDA无线订货开单”终端移动现场下单APP（打印扫描一体）
手持PDA盘点机,订货的时候,用PDA上自带的激光扫描头扫描(或手输)样品的条码,然后,只需输入该款产品不同尺码的数量即可自动(或手动)发送订货数据到总部服务器.盘点机“PDA无线订货”终端功能: 1 ...
常用的Meta标签写法和作用
页面关键词 <meta name="keywords" content="your tags" /> 页面描述 <meta name=&quo ...
ZeroMQ接口函数之：zmq_init - 初始化ZMQ环境上下文
ZeroMQ 官方地址 :http://api.zeromq.org/4-0:zmq_init zmq_init(3) ØMQ Manual - ØMQ/3.2.5 Name zmq_init - 初 ...
css样式
这是CSS的定义经常用到的样式: body{ width:100%; background:#000; text-align:center;font:12px "宋体", Aria ...
phpcmsv9 阿里云OSS云存储整合教程
该教程算不上是phpcmsv9阿里云oss插件,所以整个修改及其代码覆盖前请一定记得备份.还有一点就是后台发布文章时上传的附件还是会保存在你的服务器上,基于以下原因:1.个人的需求是前台页面需要使用t ...
Android底部菜单的实现
前言:以前制作菜单使用TabHost,但是android 3.0以上就被废弃了,google已经不建议使这个类了.ActionBar也是菜单,不过在头部,算是导航了 ===本文就介绍怎么制作底部菜单= ...
对称、非对称加密算，openssl生成证书（笔记）
对称加密算法 1.密钥只有一个,加密和解密都需要同一个密钥2.DES,IDEA,AES3.明文+密钥=密文, 密文+密钥=明文4.加密速度快,系统开销小,适用大量数据的加密非对称加密算法1.密钥由公 ...
Java实现验证码制作之一Kaptcha验证码
Kaptcha验证码是google提供的验证码插件,使用起来相对简单,设置的干扰线以及字体扭曲不易让其他人读取破解. 这里我们需要导入一个 kaptcha-2.3.jar 下载地址:http:/ ...
BS中的 data:image/png;base64
举个图片的例子: 网页中一张图片可以这样显示: <img src="http://mail.163.com/images/x.png" /> 也可以这样显示: < ...

上下箭头选中 选项事件 JS

效果图

JS代码

html代码

上下箭头选中 选项事件 JS的更多相关文章

随机推荐

热门专题

上下箭头选中选项事件 JS

上下箭头选中选项事件 JS的更多相关文章