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

随机推荐

[BI项目记]-搭建代码管理环境之服务端
上一篇介绍如何搭建环境进行文档版本的管理,这篇主要介绍搭建环境进行代码版本的管理. 即使是BI项目也要进行代码版本管理.代码版本管理的工具有很多,VSS, SVN等都是当下大家经常提起的,这里主要介绍 ...
xml dtd 定义元素
ANY 如果需要定义某个元素的值可以是任意类型,可采用如下语法 <!ELEMENT 元素名 ANY> DTD必须定义XML文档中允许出现的所有元素,所以下面这样是不行的,因为<hel ...
ubuntu下配置jdk
1.首先下载jdk-7u51-linux-i586.tar.gz.并将它放在例如/home目录. 2.解压安装 sudo tar zxvf ./jdk-7u51-linux-i586.tar.gz ...
tftp服务器的搭建
基于红帽6的tftp搭建,当然其他系统搭建方法也大致一样 #mount /dev/cdrom /mnt/ 挂载安装光盘不同光盘挂载用 fdisk -l 查看光盘 #rpm ...
BZOJ 1455 罗马游戏 ——左偏树
[题目分析] 左偏树的模板题目,大概就是尽量维护树的深度保持平衡,以及尽可能的快速合并的一种堆. 感觉和启发式合并基本相同. 其实并没有快很多. 本人的左偏树代码自带大常数,借鉴请慎重 [代码] #i ...
Appium中部分api的使用方法
使用的语言是java,appium的版本是1.3.4,java-client的版本是java-client-2.1.0,建议多参考java-client-2.1.0-javadoc. 1.使用Andr ...
XCode6 生成prefix.pch文件
XCode6里, 新建工程默认是没有pch文件的,苹果取消pch文件这一点肯定有它的道理,刚开始很多人可能不适应,如果我们想使用pch文件,需要手动添加,添加步骤如下:(依旧直接上图)
我的c++学习(11)数组和指针
使用数组显示斐波那契数列 #include "stdafx.h" using namespace std; #include<iostream> int _tmain( ...
2016 Multi-University Training Contest 1 C.Game
Game Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total Submis ...
用 Graphviz+pvtrace 可视化函数调用
最近在想怎么把一个程序的函数调用关系快速的用流程图的方式画出来,之后看到了这个一篇文章“用 Graphviz 可视化函数调用”(http://www.ibm.com/developerworks/cn ...

上下箭头选中 选项事件 JS

效果图

JS代码

html代码

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

随机推荐

热门专题

上下箭头选中选项事件 JS

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