上下箭头选中选项事件 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"> ...

随机推荐

Nginx负载均衡
负载均衡(做分发服器)1.基于浏览器的分发基于浏览器的分发,按照在不同平台的浏览器请求进行分发,比如手机浏览器讲究资源小速度快节省流量,所以将自手机浏览器的请求分发到专供处理移动平台的web服务器上, ...
UWP x:bind
x:bind 作为win10 新特性,它好在哪?为什么要用它. 最近做UWP,对代码进行重构,对它有了一些了解. 先说优点: 1.性能高,内存小(相比传统的binding) 没图没真相,我先上2张图. ...
疯狂房价"逼死"年轻人,别指望中国未来能出人才了
社会高房价,杀死那个学者 --北京青年学者生存侧记这一轮,房价又上涨了,只有更疯狂. 几年前,北京三环内的房价突破5万,世人惊呼:没几年,四环5万了,五环5万了:这一轮,北京城乡结合部,哪怕脏乱差之 ...
我的c++学习(9)指针
◆ 1.指针变量的赋值.初始化与简单应用 ,y; y=; // y可以理解成该存储单元的当前名字 int *ip; // ip是一个指针(变量) ip=&y; // ip是存储空间y的地址 c ...
Javascript/jQuery根据页面上表格创建新汇总表格
任务背景及需求按页面上的现成表格,用js生成新的统计表格如下: 实现思路 1,把表格数据抽取出来生成json数组 2,计算表格总数并创建空表格 3,历遍json数组把数据动态插入所有的表格,设值/a ...
【软件推荐】 Moom-窗口布局软件(V.3.2.2)【破解+汉化】
本文并非最终版本,如有更新或更正会第一时间置顶,联系方式详见文末如果觉得本文内容过长,请前往本人 “简书” 下载地址: 软件:https://yunpan.cn/cuTg8rCMTsLT6 ...
Easyui的Dialog的toolbar的自定义添加
最近一直在写快速定制Web表格,基于Easyui,整个过程使用了大量的Easyui的dialog,每个dialog的代码大部分都雷同,感觉代码出现了很大程度的重复,然后想写一个通用的dialog设置函 ...
搭建centos测试环境：window安装xshell,WinSCP 。 centos安装jdk tomcat
通过ssh实现远程访问linux系统: 由于xshell 连接centos,需要centos开启ssh服务.所以先启动SSH服务,没有ssh需要先安装. 1 . 查看SSH是否安装命令:rpm -qa ...
WCF的同步和异步（以WPF连接为例）
2016-06-0711:05:44 在学习WCF时,学到WCF服务的同步和异步. 我理解的同步是: 当WCF服务是同步执行时,程序只有一条线程,代码只能按顺序一步一步来执行,当执行客户端/服务端某方 ...
JSF 与 HTML 标签的联系
*页面的开头 <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%> <%@ t ...

上下箭头选中 选项事件 JS

效果图

JS代码

html代码

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

随机推荐

热门专题

上下箭头选中选项事件 JS

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