用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 20 Javascript
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
Mar 08 Javascript
document.createElement()用法及注意事项(ff下不兼容)
Mar 13 Javascript
jquery的相对父元素和相对文档定位示例代码
Aug 02 Javascript
Jquery Ajax xmlhttp请求成功问题
Feb 04 Javascript
javascript包装对象实例分析
Mar 27 Javascript
详解angular2实现ng2-router 路由和嵌套路由
Mar 24 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
Sep 05 Javascript
H5实现仿flash效果的实现代码
Sep 29 Javascript
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
Angular 组件之间的交互的示例代码
Mar 24 Javascript
React Router v4 入坑指南(小结)
Apr 08 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
NOT NULL 和NULL
2007/01/15 PHP
PHP APC的安装与使用详解
2013/06/13 PHP
php微信公众号开发之秒杀
2018/10/20 PHP
优化网页之快速的呈现我们的网页
2007/06/29 Javascript
js点击button按钮跳转到另一个新页面
2014/10/10 Javascript
jQuery中map()方法用法实例
2015/01/06 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
2016/11/06 Javascript
vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
2017/04/22 Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
2017/09/14 Javascript
使用js获取伪元素的content实例
2017/10/24 Javascript
node中modules.exports与exports导出的区别
2018/06/08 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
2018/11/21 Javascript
vue多层嵌套路由实例分析
2019/03/19 Javascript
ES6基础之字符串和函数的拓展详解
2019/08/22 Javascript
Vue.js组件使用props传递数据的方法
2019/10/19 Javascript
vue 实现input表单元素的disabled示例
2019/10/28 Javascript
vue+elementUI动态生成面包屑导航教程
2019/11/04 Javascript
关于element-ui表单中限制输入纯数字的解决方式
2020/09/08 Javascript
Python爬取APP下载链接的实现方法
2016/09/30 Python
python+matplotlib实现动态绘制图片实例代码(交互式绘图)
2018/01/20 Python
详解python字节码
2018/02/07 Python
详解Python 数据库的Connection、Cursor两大对象
2018/06/25 Python
详解配置Django的Celery异步之路踩坑
2018/11/25 Python
Python 列表去重去除空字符的例子
2019/07/20 Python
python实现批量文件重命名
2019/10/31 Python
django连接mysql数据库及建表操作实例详解
2019/12/10 Python
Django配置跨域并开发测试接口
2020/11/04 Python
python list等分并从等分的子集中随机选取一个数
2020/11/16 Python
浅谈cookie和localStorage那些事
2019/08/27 HTML / CSS
德国户外装备、登山运动和攀岩商店:tapir store
2020/02/12 全球购物
C#和SQL Server的面试题
2016/08/12 面试题
甲方资料员岗位职责
2013/12/13 职场文书
2014年乡镇纪委工作总结
2014/12/19 职场文书
青年干部培训班学习心得体会
2016/01/06 职场文书
2016年“我们的节日·中秋节”活动总结
2016/04/05 职场文书
pytorch 中nn.Dropout的使用说明
2021/05/20 Python