用jquery实现点击栏目背景色改变


Posted in Javascript onDecember 10, 2012

用jquery如何实现点击一栏目实现栏目变色,再点击另一栏目也变色,但原来的变回原色,我有个数组a(1,2,3,我循环遍历输出a的值。

<ul> 
<li><a onclick="show();"><b>a[0]<b><a></li> 
<li><a onclick="show();"><b>a[1]<b><a></li> 
<li><a onclick="show();"><b>a[2]<b><a></li>

点击1,1变色,点击2,2变色,但1会变回原来的颜色.我show方法实现了其他的功能.
下面是我初试的代码
HTML code:
<style type="text/css"> 
.clckClass{color:red;} 
</style> 
<script type="text/javascript"> 
$('ul li a').bind('click', function(){ 
$('ul li a:not(this)').removeClass('clckClass'); 
$(this).addClass('clckClass'); 
}); 
</script>JScript code: 
<style type="text/css"> 
.clckClass{color:red;} 
</style> 
<script type="text/javascript"> 
$('ul li a').bind('click', function(){ 
$('.clckClass').removeClass('clckClass'); 
$(this).addClass('clckClass'); 
}); 
</script>

上面的代码中,样式‘clckClass‘可能在其他元素上使用,使用$(‘.clckClass').removeClass(‘clckClass');会将画面上所用使用clckClass样式的元素移出clckClass样式的。这显然不是我们要得结果,我们只需要移出ul li a下的clckClass样式。不过后来发现上面的代码中,唯一一点是那个clckClass只能在这几个标签使用,如果其他也用的话,就可能会影响效果,是我考虑不周到,我只考虑了clckClass这个样式只应用在这上面的情况,那么根据这个可以做一下小的修改,如下:
JScript code:
<style type="text/css"> 
.clckClass{color:red;} 
</style> 
<script type="text/javascript"> 
var removeClassA = $('ul li a.clckClass'); 
$('ul li a').bind('click', function(){ 
removeClassA .removeClass('clckClass'); 
$(this).addClass('clckClass'); 
removeClassA = $(this); 
});

</script> 这样写将拥有clckClass这个类的节点保存在变量中,下一次点击时可以不用进行一次遍历,速度会快一点.
Javascript 相关文章推荐
用javascript编写的第一人称射击游戏
Feb 25 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
Jan 23 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
Jan 24 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
Dec 08 Javascript
详解Angular的双向数据绑定(MV-VM)
Dec 26 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
Apr 12 Javascript
详解React开发中使用require.ensure()按需加载ES6组件
May 12 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
Sep 12 Javascript
vue中的scope使用详解
Oct 29 Javascript
谈谈vue中mixin的一点理解
Dec 12 Javascript
Vue配合iView实现省市二级联动的示例代码
Jul 27 Javascript
Vue数据双向绑定原理实例解析
May 15 Javascript
jquery应该如何来设置改变按钮input的onclick事件
Dec 10 #Javascript
JQuery拖拽元素改变大小尺寸实现代码
Dec 10 #Javascript
十个迅速提升JQuery性能让你的JQuery跑得更快
Dec 10 #Javascript
JQuery each()函数如何优化循环DOM结构的性能
Dec 10 #Javascript
jquery的$getjson调用并获取远程的JSON字符串问题
Dec 10 #Javascript
如何用ajax来创建一个XMLHttpRequest对象
Dec 10 #Javascript
iframe 上下滚动条如何默认在下方实现原理
Dec 10 #Javascript
You might like
短波的认识
2021/03/01 无线电
第十三节 对象串行化 [13]
2006/10/09 PHP
PHP 根据IP地址控制访问的代码
2010/04/22 PHP
文件上传之SWFUpload插件(代码)
2015/07/30 PHP
php数组函数array_key_exists()小结
2015/12/10 PHP
Laravel开启跨域请求的方法
2019/10/13 PHP
SUN的《AJAX与J2EE》全文译了
2007/02/23 Javascript
网易JS面试题与Javascript词法作用域说明
2010/11/09 Javascript
javascript SpiderMonkey中的函数序列化如何进行
2012/12/05 Javascript
使用js修改客户端注册表的方法
2013/08/09 Javascript
js获得当前系统日期时间的方法
2015/05/06 Javascript
Javascript实现的Map集合工具类完整实例
2015/07/31 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
2015/11/21 Javascript
JS正则匹配中文的方法示例
2017/01/06 Javascript
微信小程序 基础组件与导航组件详细介绍
2017/02/21 Javascript
Bootstrap提示框效果的实例代码
2017/07/12 Javascript
vue 简单自动补全的输入框的示例
2018/03/12 Javascript
微信小程序wx.request的简单封装
2019/11/13 Javascript
Angular 多级路由实现登录页面跳转(小白教程)
2019/11/19 Javascript
[05:41]2014DOTA2西雅图国际邀请赛 小组赛7月10日TOPPLAY
2014/07/10 DOTA
[11:42]2018DOTA2国际邀请赛寻真——OG卷土重来
2018/08/17 DOTA
python使用正则表达式的search()函数实现指定位置搜索功能
2017/11/10 Python
Python爬虫框架Scrapy实例代码
2018/03/04 Python
python @propert装饰器使用方法原理解析
2019/12/25 Python
深入浅析python 中的self和cls的区别
2020/06/20 Python
golang/python实现归并排序实例代码
2020/08/30 Python
什么是Python包的循环导入
2020/09/08 Python
美国最顶级的精品店之一:Hampden Clothing
2016/12/22 全球购物
美国五金商店:Ace Hardware
2018/03/27 全球购物
巴西美妆购物网站:Kutiz Beauté
2019/03/13 全球购物
金融专业毕业生推荐信
2013/11/26 职场文书
移风易俗倡议书
2014/04/15 职场文书
关于安全的标语
2014/06/10 职场文书
小学生组织委员竞选稿
2015/11/21 职场文书
幼儿园教师辞职信
2019/06/21 职场文书
Java基础之详解HashSet的使用方法
2021/06/30 Java/Android