用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 相关文章推荐
不安全的常用的js写法
Sep 15 Javascript
使用JavaScript库还是自己写代码?
Jan 28 Javascript
jquery load()在firefox(火狐)下显示不正常的解决方法
Apr 05 Javascript
js倒计时小程序
Nov 05 Javascript
jQuery实现数字加减效果汇总
Dec 16 Javascript
JS实现仿QQ聊天窗口抖动特效
May 10 Javascript
swtich/if...else的替代语句
Aug 16 Javascript
深入探究JavaScript中for循环的效率问题及相关优化
Mar 13 Javascript
快速搭建React的环境步骤详解
Nov 06 Javascript
node前端模板引擎Jade之标签的基本写法
May 11 Javascript
django js 实现表格动态标序号的实例代码
Jul 12 Javascript
vue实现全匹配搜索列表内容
Sep 26 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文件下载类
2006/12/06 PHP
php 代码优化之经典示例
2011/03/24 PHP
IIS7.X配置PHP运行环境小结
2011/06/09 PHP
PHP将session信息存储到数据库的类实例
2015/03/04 PHP
ThinkPHP3.2.2实现持久登录(记住我)功能的方法
2016/05/16 PHP
Laravel框架控制器,视图及模型操作图文详解
2019/12/04 PHP
通过js为元素添加多项样式,浏览器全兼容写法
2014/08/30 Javascript
微信小程序 利用css实现遮罩效果实例详解
2017/01/21 Javascript
Nodejs 复制文件/文件夹的方法
2017/08/24 NodeJs
js代码规范之Eslint安装与配置详解
2018/09/08 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
2018/11/21 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
2019/04/16 Javascript
jquery实现动态改变css样式的方法分析
2019/05/27 jQuery
python实现无证书加密解密实例
2014/10/27 Python
Python标准库urllib2的一些使用细节总结
2015/03/16 Python
对Python中9种生成新对象的方法总结
2018/05/23 Python
python批量从es取数据的方法(文档数超过10000)
2018/12/27 Python
详解Django中CBV(Class Base Views)模型源码分析
2019/02/25 Python
在Python函数中输入任意数量参数的实例
2019/07/16 Python
python批量图片处理简单示例
2019/08/06 Python
python+opencv实现车牌定位功能(实例代码)
2019/12/24 Python
Python requests模块cookie实例解析
2020/04/14 Python
python实现批量命名照片
2020/06/18 Python
用Python开发app后端有优势吗
2020/06/29 Python
解决Keras中CNN输入维度报错问题
2020/06/29 Python
Farnell德国:电子元器件供应商
2018/07/10 全球购物
J2EE中的容器都包括哪些
2013/08/21 面试题
客服主管岗位职责
2013/12/13 职场文书
适用于所有创业者的创业计划书
2014/02/05 职场文书
网络研修随笔感言
2014/02/17 职场文书
工作证明格式及范本
2014/09/12 职场文书
先进工作者个人总结
2015/02/15 职场文书
大学生入党群众意见书
2015/06/02 职场文书
简短清晨问候语
2015/11/10 职场文书
2016年社区创先争优活动总结
2016/04/05 职场文书
PHP连接MSSQL数据库案例,PHPWAMP多个PHP版本连接SQL Server数据库
2021/04/16 PHP