用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 相关文章推荐
jQuery 版本的文本输入框检查器Input Check
Jul 09 Javascript
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
May 28 Javascript
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
Nov 15 Javascript
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
Mar 24 Javascript
js AppendChild与insertBefore用法详细对比
Dec 16 Javascript
JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法
Aug 03 Javascript
JS实现JSON.stringify的实例代码讲解
Feb 07 Javascript
基于javascript的异步编程实例详解
Apr 10 Javascript
微信小程序 页面跳转事件绑定的实例详解
Sep 20 Javascript
细说webpack源码之compile流程-入口函数run
Dec 26 Javascript
vue中多路由表头吸顶实现的几种布局方式
Apr 12 Javascript
js的新生代垃圾回收知识点总结
Aug 22 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音乐采集(部分代码)
2007/02/14 PHP
PHP判断文件是否存在、是否可读、目录是否存在的代码
2012/10/03 PHP
10个对初学者非常有用的PHP技巧
2016/04/06 PHP
php 自定义错误日志实例详解
2016/11/12 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
node.js入门教程迷你书、node.js入门web应用开发完全示例
2014/04/06 Javascript
javascript查询字符串参数的方法
2015/01/28 Javascript
JS实现向表格行添加新单元格的方法
2015/03/30 Javascript
使用javascript实现判断当前浏览器
2015/04/14 Javascript
初识angular框架后的所思所想
2016/02/19 Javascript
vue监听滚动事件实现滚动监听
2017/04/11 Javascript
AngularJS 中ui-view传参的实例详解
2017/08/25 Javascript
Vue组件之全局组件与局部组件的使用详解
2017/10/09 Javascript
vue router下的html5 history在iis服务器上的设置方法
2017/10/18 Javascript
使用命令行工具npm新创建一个vue项目的方法
2017/12/27 Javascript
vue2.0 循环遍历加载不同图片的方法
2018/03/06 Javascript
vue init webpack 建vue项目报错的解决方法
2018/09/29 Javascript
angular 未登录状态拦截路由跳转的方法
2018/10/09 Javascript
用js实现放大镜效果
2020/10/28 Javascript
python中去空格函数的用法
2014/08/21 Python
Python中关于字符串对象的一些基础知识
2015/04/08 Python
python获取文件扩展名的方法
2015/07/06 Python
Python设计模式之命令模式简单示例
2018/01/10 Python
Python Tkinter实现简易计算器功能
2018/01/30 Python
Python绘制并保存指定大小图像的方法
2019/01/10 Python
在Python 的线程中运行协程的方法
2020/02/24 Python
Python reversed函数及使用方法解析
2020/03/17 Python
介绍一下sql server的安全性
2014/08/10 面试题
《夏夜多美》教学反思
2014/02/17 职场文书
市场营销求职信范文
2014/02/21 职场文书
远程培训的心得体会
2014/09/01 职场文书
工商局副局长个人对照检查材料
2014/09/25 职场文书
给老婆的检讨书1000字
2015/01/01 职场文书
2015年小学师德师风建设工作总结
2015/10/23 职场文书
分享几个JavaScript运算符的使用技巧
2021/04/24 Javascript
td 内容自动换行 table表格td设置宽度后文字太多自动换行
2022/12/24 HTML / CSS