用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遍历td tr等html元素
Dec 13 Javascript
解析使用js判断只能输入数字、字母等验证的方法(总结)
May 14 Javascript
jquery实现简单手风琴菜单效果实例
Jun 13 Javascript
js实现类似菜单风格的TAB选项卡效果代码
Aug 28 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
Oct 10 Javascript
jQuery实现标签页效果实战(4)
Feb 08 Javascript
无循环 JavaScript(map、reduce、filter和find)
Apr 08 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
Oct 29 Javascript
解决vue移动端适配问题
Dec 12 Javascript
Layui数据表格跳转到指定页的实现方法
Sep 05 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
Oct 24 Javascript
jenkins自动构建发布vue项目的方法步骤
Jan 04 Vue.js
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 Token(令牌)设计
2008/03/15 PHP
关于查看MSSQL 数据库 用户每个表 占用的空间大小
2013/06/21 PHP
php中的比较运算符详解
2013/10/28 PHP
Zend Framework教程之前端控制器Zend_Controller_Front用法详解
2016/03/07 PHP
JavaScript 获取用户客户端操作系统版本
2009/08/25 Javascript
jsTree 基于JQuery的排序节点 Bug
2011/07/26 Javascript
基于js disabled=&quot;false&quot;不起作用的解决办法
2013/06/26 Javascript
js跨浏览器实现将字符串转化为xml对象的方法
2013/09/25 Javascript
Js为表单动态添加节点内容的方法
2015/02/10 Javascript
简单总结JavaScript中的String字符串类型
2016/05/26 Javascript
关于动态生成dom绑定事件失效的原因及解决方法
2016/08/06 Javascript
Asp.Net之JS生成分页条的方法
2016/11/23 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
2017/05/02 Javascript
jquery 一键复制到剪切板的实例
2017/09/20 jQuery
vue 表单输入格式化中文输入法异常问题
2018/05/30 Javascript
vuex实现像调用模板方法一样调用Mutations方法
2019/11/06 Javascript
VueQuillEditor富文本上传图片(非base64)
2020/06/03 Javascript
[02:41]DOTA2英雄基础教程 冥魂大帝
2014/01/16 DOTA
[31:33]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第一场
2014/05/23 DOTA
[01:52]PWL S2开团时刻第四期——DOTA2成语故事
2020/12/03 DOTA
Python统计文件中去重后uuid个数的方法
2015/07/30 Python
python开发之thread实现布朗运动的方法
2015/11/11 Python
Python脚本实时处理log文件的方法
2016/11/21 Python
python3利用Dlib19.7实现人脸68个特征点标定
2018/02/26 Python
Python中Numpy包的安装与使用方法简明教程
2018/07/03 Python
python利用后缀表达式实现计算器功能
2021/02/22 Python
用HTML5制作一个简单的桌球游戏的教程
2015/05/12 HTML / CSS
Html5实现移动端、PC端 刮刮卡效果
2016/06/30 HTML / CSS
局域网定义和特性
2016/01/23 面试题
金属材料工程毕业生个人的自我评价
2013/11/28 职场文书
心得体会开头
2014/01/01 职场文书
空中乘务员岗位职责
2014/03/08 职场文书
品德评语大全
2014/05/05 职场文书
博士生专家推荐信
2014/09/26 职场文书
考研导师推荐信范文
2015/03/27 职场文书
2015年机关作风和效能建设工作总结
2015/07/23 职场文书