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

随机推荐

[JAVA] BlockingQueue学习
有点时间,巩固巩固下基础知识:BlockingQueue,如果BlockQueue是空的,从BlockingQueue取东西的操作将会被阻断进入等待状态,直到BlockingQueue进了东西才会被唤 ...
浅谈HTTP事务的一个过程
一个腾讯在职的朋友问道,当我们在浏览器的地址栏输入 www.baidu.com ,然后回车,这一瞬间页面发生了什么?下面以谷歌浏览器一一解释．一.域名解析首先Chrome浏览器会解析www.bai ...
requirejs(一)
RequireJs已经流行很久了,我们在项目中也打算使用它.它提供了以下功能: 声明不同js文件之间的依赖可以按需.并行.延时载入js库可以让我们的代码以模块化的方式组织初看起来并不复杂. 在h ...
python中获取指定目录下所有文件名列表的程序
http://blog.csdn.net/rumswell/article/details/9818001 # -*- coding: utf-8 -*-#~ #------------------- ...
Working in Singapore
这篇blog主要是想说说最近以及将来一年的时间需要在Singapore工作的感受.你可能以及猜到了,我现在写这篇blog是在Singapore的Office里面. 在一个月之前还在成都工作,每天9:0 ...
Bigtable 论文阅读笔记 - 原理部分
不支持markdown,桑心.更好的阅读体验请看:Github/Bigtable.md Paper: Google Bigtable paper Notes author: Lhfcws Wu Tim ...
第6章 DOM节点操作
一．创建节点为了使页面更加智能化,有时我们想动态的在 html 结构页面添加一个元素标签,那么在插入之前首先要做的动作就是:创建节点. varbox=$('<div id="box ...
mysql基本语法
MySql一些基本语法 3.3.5 直接在数据库目录中创建或删除用上述方法创建数据库,只是MySQL数据目录下面创建一个与数据库同名目录,同样删除数据库是把这个目录删除. 所以,你可以直接 ...
MySQL 5.6 记录 SQL 语句与慢查询
环境: MySQL 如果需要记录 MySQL 的查询语句,需要在配置文件(Linux 下为 my.cnf,Windows 下为 my.ini)中添加配置: general_log = ON gener ...
解决svn working copy locked问题
标题:working copy locked 提示:your working copy appears to be locked. run cleanup to amend the situation ...

上下箭头选中 选项事件 JS

效果图

JS代码

html代码

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

随机推荐

热门专题

上下箭头选中选项事件 JS

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