用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技术技巧大全(五)
Jan 22 Javascript
javascript中this做事件参数相关问题解答
Mar 17 Javascript
JavaScript使用concat连接数组的方法
Apr 06 Javascript
JavaScrip调试技巧之断点调试
Oct 22 Javascript
微信小程序 天气预报开发实例代码源码
Jan 20 Javascript
BootStrapValidator初使用教程详解
Feb 10 Javascript
Vue.js事件处理器与表单控件绑定详解
Mar 20 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
Apr 19 Javascript
vue-router 路由基础的详解
Oct 17 Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
Oct 19 Javascript
原生javascript AJAX 三级联动的实现代码
May 04 Javascript
微信小程序移动拖拽视图-movable-view实例详解
Aug 17 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
4月1日重磅发布!《星际争霸II》6.0.0版本更新
2020/04/09 星际争霸
zend api扩展的php对象的autoload工具
2011/04/18 PHP
php实现window平台的checkdnsrr函数
2015/05/27 PHP
php利用递归实现删除文件目录的方法
2016/09/23 PHP
PHP实现验证码校验功能
2017/11/16 PHP
PHP基于进程控制函数实现多线程
2020/12/09 PHP
用JS剩余字数计算的代码
2008/07/03 Javascript
Javascript 解疑
2009/11/11 Javascript
javascript五图轮播切换实用版
2012/08/17 Javascript
使用js画图之圆、弧、扇形
2015/01/12 Javascript
javascript实现随时变化着的背景颜色
2015/04/02 Javascript
完美实现bootstrap分页查询
2015/12/09 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
2016/10/28 Javascript
javascript实现的图片预览功能
2017/03/25 Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
2017/05/08 jQuery
JS栈stack类的实现与使用方法示例
2019/01/31 Javascript
JS实现骰子3D旋转效果
2019/10/24 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
2019/11/29 Javascript
[02:47]2018年度DOTA2最佳辅助位选手4号位-完美盛典
2018/12/17 DOTA
Pythont特殊语法filter,map,reduce,apply使用方法
2016/02/27 Python
在PyTorch中Tensor的查找和筛选例子
2019/08/18 Python
python实现飞机大战游戏(pygame版)
2020/10/26 Python
Django数据库操作之save与update的使用
2020/04/01 Python
Python 在 VSCode 中使用 IPython Kernel 的方法详解
2020/09/05 Python
如何基于Python爬虫爬取美团酒店信息
2020/11/03 Python
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
2013/01/09 HTML / CSS
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
2013/11/07 HTML / CSS
语文教育专业应届生求职信
2013/11/23 职场文书
岗位职责风险点
2014/03/12 职场文书
房展策划方案
2014/06/07 职场文书
体育节口号
2014/06/19 职场文书
红领巾广播站广播稿
2014/10/19 职场文书
2014年妇女工作总结
2014/12/06 职场文书
常务副总经理岗位职责
2015/02/02 职场文书
个性与发展自我评价
2015/03/06 职场文书
原生JS中应该禁止出现的写法
2021/05/05 Javascript