收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 1561|回复: 4

[求助] 赐教jquery键盘样式切换

[复制链接]
发表于 2012-8-22 14:10:26 | 显示全部楼层 |阅读模式
按键盘右键 给下一个a加cur 上个a的cur移除
按键盘左键 给上一个a加cur 上个a的cur移除

 提示:您可以先修改部分代码再运行

 楼主| 发表于 2012-8-22 17:02:10 | 显示全部楼层
本帖最后由 33xiao 于 2012-8-22 17:03 编辑

自己已经研究出来了 用next() 和 prev() 就行了
之前也没搞清楚选择器 应该是$(".cur").next() 而不是 $(".menu a")
$(".cur").next().addClass("cur").siblings().removeClass("cur");
$(".cur").prev().addClass("cur").siblings().removeClass("cur");
回复 支持 反对

使用道具 举报

发表于 2012-8-22 17:14:53 | 显示全部楼层
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript"  src="http://code.jquery.com/jquery-1.8.0.min.js" ></script>
<title>无标题文档 </title>
<style>
body{font-size:12px;}
.page a{ display:block;width:25px;height:25px; border:1px #ccc solid; text-align:center; line-height:25px; color:#000; float: left; margin-right:10px; text-decoration:none}
.page a.cur{background:#999; color:#fff}
</style>

<script>
//键盘按下时获取按键值
// $(document).keydown(function(event){
//        alert(event.keyCode);
// });

$(function  (){
        $(".page a").each(function(){
                $(this).click(function(){
                        $(this).addClass("cur").siblings().removeClass("cur");
                })
        })
});
$(document).keydown(function(event){
        if(event.keyCode == 37){
        $(".cur").prev().addClass("cur").siblings().removeClass("cur");
         }else if (event.keyCode == 39){
         $(".cur").next().addClass("cur").siblings().removeClass("cur");
                 }
});


</script>

</head>

<body>
<div class="page">
        <a href="javascript:void(0)" class="cur">1</a>
        <a href="javascript:void(0)">2</a>
        <a href="javascript:void(0)">3</a>
        <a href="javascript:void(0)">4</a>
        <a href="javascript:void(0)">5</a>
</div>
</body>
</html>
回复 支持 反对

使用道具 举报

发表于 2012-8-22 17:15:30 | 显示全部楼层
我还在用js 帮您实现 麻烦的一米。。。。。jq 很强大,不得不这么说
回复 支持 反对

使用道具 举报

 楼主| 发表于 2012-8-23 18:11:53 | 显示全部楼层
zhenxi537 发表于 2012-8-22 17:15
我还在用js 帮您实现 麻烦的一米。。。。。jq 很强大,不得不这么说

太感谢了。我在学习中。以后希望多来蓝色交流
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-12-5 10:33 , Processed in 0.077929 second(s), 7 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表