用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 相关文章推荐
20个非常棒的 jQuery 幻灯片插件和教程分享
Aug 23 Javascript
jQuery移除元素自动解绑事件实现思路及代码
May 31 Javascript
jquery实现翻动fadeIn显示的方法
Mar 05 Javascript
JQuery查找DOM节点的方法
Jun 11 Javascript
jquery对象和DOM对象的相互转换详解
Oct 18 Javascript
微信开发 使用picker封装省市区三级联动模板
Oct 28 Javascript
微信小程序商城项目之商品属性分类(4)
Apr 17 Javascript
React中使用collections时key的重要性详解
Aug 07 Javascript
JS Input里添加小图标的两种方法
Nov 11 Javascript
Javascript实现秒表倒计时功能
Nov 17 Javascript
ES6顶层对象、global对象实例分析
Jun 14 Javascript
javascript实现简易聊天室
Jul 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源代码数组统计count分析
2011/08/02 PHP
php无限遍历文件夹示例分享
2014/03/04 PHP
php安装dblib扩展,连接mssql的具体步骤
2017/03/02 PHP
laravel邮件发送的实现代码示例
2020/01/31 PHP
实例:用 JavaScript 来操作字符串(一些字符串函数)
2007/02/15 Javascript
top.location.href 没有权限 解决方法
2008/08/05 Javascript
基于JQuery框架的AJAX实例代码
2009/11/03 Javascript
jquery网页元素拖拽插件效果及实现
2013/08/05 Javascript
关于js数组去重的问题小结
2014/01/24 Javascript
js动态拼接正则表达式的两种方法
2014/03/04 Javascript
浅谈jQuery事件绑定原理
2015/01/02 Javascript
javascript的函数劫持浅析
2016/09/26 Javascript
JS实现的自动打字效果示例
2017/03/10 Javascript
jQuery中extend函数简单用法示例
2017/10/11 jQuery
详解Vue 动态组件与全局事件绑定总结
2018/11/11 Javascript
浅谈Node 异步IO和事件循环
2019/05/05 Javascript
JavaScript实现页面中录音功能的方法
2019/06/04 Javascript
150行Node.js实现的dns代理工具
2019/08/02 Javascript
详解vue-video-player使用心得(兼容m3u8)
2019/08/23 Javascript
vue解决花括号数据绑定不成功的问题
2019/10/30 Javascript
vue+element 实现商城主题开发的示例代码
2020/03/26 Javascript
前端开发基础javaScript的六大作用
2020/08/06 Javascript
Vue使用Element实现增删改查+打包的步骤
2020/11/25 Vue.js
用Python进行行为驱动开发的入门教程
2015/04/23 Python
python动态加载包的方法小结
2016/04/18 Python
学习python的前途 python挣钱
2019/02/27 Python
python获取依赖包和安装依赖包教程
2020/02/13 Python
关于python 跨域处理方式详解
2020/03/28 Python
Django ORM判断查询结果是否为空,判断django中的orm为空实例
2020/07/09 Python
欧舒丹美国官网:L’Occitane美国
2018/02/23 全球购物
南非最大的在线时尚商店:Zando
2019/07/21 全球购物
laravel使用redis队列实例讲解
2021/03/23 PHP
机械工程师岗位职责
2014/06/16 职场文书
2014年底工作总结
2014/12/15 职场文书
2015年七夕情人节感言
2015/08/03 职场文书
mybatis3中@SelectProvider传递参数方式
2021/08/04 Java/Android