用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 isArray()函数判断对象类型的种种方法
Oct 11 Javascript
javascript学习笔记(十) js对象 继承
Jun 19 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
May 08 Javascript
提升PHP安全:8个必须修改的PHP默认配置
Nov 17 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
Jun 25 Javascript
JavaScript使用RegExp进行正则匹配的方法
Jul 11 Javascript
js实现新年倒计时效果
Dec 10 Javascript
巧用数组制作图片切换js代码
Nov 29 Javascript
jQuery实现优雅的弹窗效果(6)
Feb 08 Javascript
微信小程序实现的canvas合成图片功能示例
May 03 Javascript
微信小程序定义和调用全局变量globalData的实现
Nov 01 Javascript
node.js +mongdb实现登录功能
Jun 18 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 远程图片保存到本地的函数类
2008/12/08 PHP
thinkphp项目部署到Linux服务器上报错“模板不存在”如何解决
2016/04/27 PHP
PHP实现将MySQL重复ID二维数组重组为三维数组的方法
2016/08/01 PHP
Laravel 5.5 异常处理 &amp; 错误日志的解决
2019/10/17 PHP
如何实现JS函数的重载
2006/09/22 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
2013/05/07 Javascript
获取数组中最大最小值方法js代码(自写)
2013/08/12 Javascript
Node.js模拟浏览器文件上传示例
2014/03/26 Javascript
javascript比较语义化版本号的实现代码
2016/09/09 Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
2017/05/20 Javascript
详解JavaScript作用域和作用域链
2019/03/19 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
2019/07/23 Javascript
[46:04]Liquid vs VP Supermajor决赛 BO 第四场 6.10
2018/07/05 DOTA
python列表操作之extend和append的区别实例分析
2015/07/28 Python
举例讲解Python中的身份运算符的使用方法
2015/10/13 Python
玩转python爬虫之URLError异常处理
2016/02/17 Python
Python实现统计代码行的方法分析
2017/07/12 Python
TensorFlow 合并/连接数组的方法
2018/07/27 Python
Python 限定函数参数的类型及默认值方式
2019/12/24 Python
python使用多线程+socket实现端口扫描
2020/05/28 Python
Python实现PS滤镜中的USM锐化效果
2020/12/04 Python
Pycharm 如何一键加引号的方法步骤
2021/02/05 Python
Silk’n激光脱毛器官网:silkn.com
2016/10/06 全球购物
销售代表求职自荐信
2013/10/01 职场文书
后勤园长自我鉴定
2013/10/17 职场文书
电气专业应届生求职信
2013/11/01 职场文书
六一儿童节主持词
2014/03/21 职场文书
公司离职证明样本
2014/09/13 职场文书
学生偷窃检讨书
2014/09/25 职场文书
县政府领导班子四风问题对照检查材料思想汇报
2014/09/26 职场文书
技术支持岗位职责
2015/02/13 职场文书
道歉情书大全
2015/05/12 职场文书
2015年管理人员工作总结
2015/05/13 职场文书
2015年度招聘工作总结
2015/05/28 职场文书
农村结婚典礼主持词
2015/06/29 职场文书
文艺有韵味的诗句(生命类、亲情类...)
2019/07/11 职场文书