用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 继承使用分析
May 12 Javascript
Js,alert出现乱码问题的解决方法
Jun 19 Javascript
JS 页面计时器示例代码
Oct 28 Javascript
php+js实现倒计时功能
Jun 02 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
Aug 13 Javascript
js 自带的sort() 方法全面了解
Aug 16 Javascript
JS中substring与substr的用法
Nov 16 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
Dec 02 Javascript
微信小程序仿微信运动步数排行(交互)
Jul 13 Javascript
对vue下点击事件传参和不传参的区别详解
Sep 15 Javascript
angularjs请求数据的方法示例
Aug 06 Javascript
js获取本日、本周、本月的时间代码
Feb 01 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使用反射机制实现查找类和方法的所在位置
2016/04/22 PHP
php利用header函数下载各种文件
2016/08/24 PHP
PHP实现页面静态化的超简单方法
2016/09/06 PHP
Yii2创建多界面主题(Theme)的方法
2016/10/08 PHP
php双层循环(九九乘法表)
2017/10/23 PHP
Apply an AutoFormat to an Excel Spreadsheet
2007/06/12 Javascript
指定js可访问其它域名的cookie的方法
2007/09/18 Javascript
在次封装easyui-Dialog插件实现代码
2010/11/14 Javascript
javascript event 事件解析
2011/01/31 Javascript
深入解析JavaScript中的变量作用域
2013/12/06 Javascript
在jquery boxy中添加百度地图坐标拾取注意流程
2014/04/03 Javascript
jquery实现对联广告的方法
2015/02/05 Javascript
JavaScript实现数字数组正序排列的方法
2015/04/06 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
2015/12/17 Javascript
jQuery设置Cookie及删除Cookie实例分析
2016/04/15 Javascript
浅谈javascript中new操作符的原理
2016/06/07 Javascript
用js实现博客打赏功能
2016/10/24 Javascript
bootstrap fileinput完整实例分享
2016/11/08 Javascript
vue中组件通信的八种方式(值得收藏!)
2019/08/09 Javascript
简单谈谈javascript高级特性
2019/09/04 Javascript
Python连接Mssql基础教程之Python库pymssql
2018/09/16 Python
Python3的介绍、安装和命令行的认识(推荐)
2018/10/20 Python
python引入不同文件夹下的自定义模块方法
2018/10/27 Python
解决pytorch 保存模型遇到的问题
2021/03/03 Python
美国优质宠物用品购买网站:Muttropolis
2020/02/17 全球购物
以下为Windows NT 下的32 位C++程序,请计算sizeof 的值
2016/12/07 面试题
Java语言程序设计测试题判断题部分
2013/01/06 面试题
单位门卫岗位职责
2013/12/20 职场文书
还款承诺书范文
2014/05/20 职场文书
人事经理岗位职责范本
2014/08/04 职场文书
人大调研汇报材料
2014/08/14 职场文书
廉政文化进校园广播稿
2014/10/20 职场文书
首都博物馆观后感
2015/06/05 职场文书
七夕情人节问候语
2015/11/11 职场文书
python缺失值的解决方法总结
2021/06/09 Python
浅谈MySQL中的六种日志
2022/03/23 MySQL