用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 相关文章推荐
instanceof和typeof运算符的区别详解
Jan 06 Javascript
jQuery 无限级菜单的简单实例
Feb 21 Javascript
JavaScript对数字的判断与处理实例分析
Feb 02 Javascript
jQuery实现返回顶部效果的方法
May 29 Javascript
详解JavaScript中常用的函数类型
Nov 18 Javascript
纯JS代码实现气泡效果
May 04 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
Oct 10 Javascript
js 轮播效果实例分享
Dec 28 Javascript
Vue2.0实现购物车功能
Jun 05 Javascript
vue-router懒加载速度缓慢问题及解决方法
Nov 25 Javascript
微信小程序实现一张或多张图片上传(云开发)
Sep 25 Javascript
基于JS实现简单滑块拼图游戏
Oct 12 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
PHP图像处理之imagecreate、imagedestroy函数介绍
2014/11/19 PHP
PHP正则表达式之捕获组与非捕获组
2015/11/06 PHP
php同时使用session和cookie来保存用户登录信息的实现代码
2016/05/13 PHP
My Desktop :) 桌面式代码
2008/12/29 Javascript
基于jquery的获取浏览器窗口大小的代码
2011/03/28 Javascript
鼠标移到导航当前位置的LI变色处于选中状态
2013/08/23 Javascript
引用外部脚本时script标签关闭的写法
2014/01/20 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
2014/06/17 Javascript
NodeJS学习笔记之Connect中间件模块(二)
2015/01/27 NodeJs
JavaScript 浏览器对象模型BOM使用介绍
2015/04/13 Javascript
js发送短信倒计时的简单实现方法
2016/09/08 Javascript
Javascript动画效果(4)
2016/10/11 Javascript
bootstrap datetimepicker2.3.11时间插件使用
2016/11/19 Javascript
浅谈Vue的基本应用
2016/12/27 Javascript
Ionic2调用本地SQlite实例
2017/04/22 Javascript
浅谈Angular 的变化检测的方法
2018/03/01 Javascript
基于nodejs的雪碧图制作工具的示例代码
2018/11/05 NodeJs
Vue 同步异步存值取值实现案例
2020/08/05 Javascript
举例讲解Python编程中对线程锁的使用
2016/07/12 Python
Django 响应数据response的返回源码详解
2019/08/06 Python
python3的数据类型及数据类型转换实例详解
2019/08/20 Python
Pytorch 之修改Tensor部分值方式
2019/12/27 Python
python读取ini配置的类封装代码实例
2020/01/08 Python
CSS3中的content属性使用示例
2015/07/20 HTML / CSS
波兰最大的度假胜地和城市公寓租赁运营商:Sun & Snow
2018/10/18 全球购物
工商管理专业应届生求职信
2013/11/04 职场文书
质检员的岗位职责
2013/11/15 职场文书
篝火晚会主持词
2014/03/25 职场文书
《苏珊的帽子》教学反思
2014/04/07 职场文书
新闻学专业求职信
2014/07/28 职场文书
公安交警中队队长个人对照检查材料思想汇报
2014/10/05 职场文书
银行客户经理岗位职责
2015/04/09 职场文书
2016年基层党支部书记公开承诺书
2016/03/25 职场文书
Java 将PPT幻灯片转为HTML文件的实现思路
2021/06/11 Java/Android
Python常用配置文件ini、json、yaml读写总结
2021/07/09 Python
详解MongoDB排序时内存大小限制与创建索引的注意事项
2022/05/06 MongoDB