用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 相关文章推荐
网页常用特效代码整理
Jun 23 Javascript
js中的referrer返回上一页使用介绍
Sep 26 Javascript
jquery中子元素和后代元素的区别示例介绍
Apr 02 Javascript
JavaScript中getUTCSeconds()方法的使用详解
Jun 11 Javascript
JavaScript中字符串拼接的基本方法
Jul 07 Javascript
使用js复制链接中的部分文字的方法
Jul 30 Javascript
js实现点击获取验证码倒计时效果
Jan 28 Javascript
javascript多物体运动实现方法分析
Jan 08 Javascript
完美的js图片轮换效果
Feb 05 Javascript
原生JS封装_new函数实现new关键字的功能
Aug 12 Javascript
vue 获取视频时长的实例代码
Aug 20 Javascript
解决layui使用layui-icon出现默认图标的问题
Sep 11 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安全之直接用$获取值而不$_GET 字符转义
2012/06/03 PHP
深入PHP FTP类的详解
2013/06/13 PHP
Smarty foreach控制循环次数的实现详解
2013/07/03 PHP
PHP实现AES256加密算法实例
2014/09/22 PHP
PHP版QQ互联OAuth示例代码分享
2015/07/05 PHP
PHP实现登陆表单提交CSRF及验证码
2017/01/24 PHP
Alliance vs Liquid BO3 第一场2.13
2021/03/10 DOTA
iframe 上下滚动条如何默认在下方实现原理
2012/12/10 Javascript
JavaScript调用ajax获取文本文件内容实现代码
2014/03/28 Javascript
jQuery Html控件基本操作(日常收集整理)
2016/03/11 Javascript
Function.prototype.apply()与Function.prototype.call()小结
2016/04/27 Javascript
Bootstrap进度条学习使用
2017/02/09 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
2017/07/02 Javascript
小程序页面动态配置实现方法
2019/02/05 Javascript
vuex实现及简略解析(小结)
2019/03/01 Javascript
JS字符串常用操作方法实例小结
2019/06/24 Javascript
vuex state中的数组变化监听实例
2019/11/06 Javascript
[02:40]2018年度DOTA2最佳新人-完美盛典
2018/12/16 DOTA
详解Python的Django框架中Manager方法的使用
2015/07/21 Python
Python之Scrapy爬虫框架安装及使用详解
2017/11/16 Python
浅谈python正则的常用方法 覆盖范围70%以上
2018/03/14 Python
详谈python3 numpy-loadtxt的编码问题
2018/04/29 Python
Python简单爬虫导出CSV文件的实例讲解
2018/07/06 Python
python如何删除列为空的行
2020/07/17 Python
python实现数学模型(插值、拟合和微分方程)
2020/11/13 Python
CSS3实现渐变背景兼容问题
2020/05/06 HTML / CSS
卫生安全检查制度
2014/02/04 职场文书
网页美工求职信
2014/02/15 职场文书
写求职信要注意什么问题
2014/04/12 职场文书
销售类求职信
2014/06/13 职场文书
2014小学数学教师个人工作总结
2014/12/18 职场文书
检讨书模板大全
2015/05/07 职场文书
元旦晚会主持词开场白
2015/05/28 职场文书
2015元旦感言
2015/12/09 职场文书
Pytorch中的数据集划分&正则化方法
2021/05/27 Python
Docker官方工具docker-registry案例演示
2022/04/13 Servers