用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的匿名函数来分析几段简单有趣的代码
Jun 29 Javascript
myeclipse安装jQuery插件的方法
Mar 29 Javascript
node.js入门教程
Jun 01 Javascript
javascript求日期差的方法
Mar 02 Javascript
JavaScript学习笔记之数组的增、删、改、查
Mar 23 Javascript
深入理解angularjs过滤器
May 25 Javascript
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
浅谈微信页面入口文件被缓存解决方案
Sep 29 Javascript
原生JS 实现的input输入时表格过滤操作示例
Aug 03 Javascript
react PropTypes校验传递的值操作示例
Apr 28 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
Aug 06 Javascript
详解vite2.0配置学习(typescript版本)
Feb 25 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
外媒评选出10支2020年最受欢迎的Dota2战队
2021/03/05 DOTA
PHP生成便于打印的网页
2006/10/09 PHP
php实现多张图片上传加水印技巧
2013/04/18 PHP
Windows下的PHP安装pear教程
2014/10/24 PHP
linux下php上传文件注意事项
2016/06/11 PHP
php基于单例模式封装mysql类完整实例
2016/10/18 PHP
完美解决php 导出excle的.csv格式的数据时乱码问题
2017/02/18 PHP
jQuery插件开发全解析
2012/10/10 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
2014/07/21 Javascript
EasyUI中实现form表单提交的示例分享
2015/03/01 Javascript
使用Raygun对Node.js应用进行错误处理的方法
2015/06/23 Javascript
jquery实现左右滑动菜单效果代码
2015/08/27 Javascript
易操作的jQuery表单提示插件
2015/12/01 Javascript
javascript实现列表切换效果
2016/05/02 Javascript
原生js实现jquery函数animate()动画效果的简单实例
2016/08/21 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
2016/10/14 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
2017/02/13 Javascript
JavaScript实现隐藏省略文字效果的方法
2017/04/27 Javascript
vue中组件的3种使用方式详解
2019/03/23 Javascript
[42:52]Optic vs Serenity 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
Python连接phoenix的方法示例
2017/09/29 Python
python使用PIL给图片添加文字生成海报示例
2018/08/17 Python
Python操作rabbitMQ的示例代码
2019/03/19 Python
pyinstaller 3.6版本通过pip安装失败的解决办法(推荐)
2020/01/18 Python
Django 解决新建表删除后无法重新创建等问题
2020/05/21 Python
python3.7+selenium模拟淘宝登录功能的实现
2020/05/26 Python
Python使用urlretrieve实现直接远程下载图片的示例代码
2020/08/17 Python
css3实例教程 一款纯css3实现的发光屏幕旋转特效
2014/12/07 HTML / CSS
css3利用transform变形结合事件完成扇形导航
2020/10/26 HTML / CSS
HTML5超文本标记语言的实现方法
2020/09/24 HTML / CSS
2015年元宵节活动总结
2015/02/06 职场文书
以权谋私检举信范文
2015/03/02 职场文书
法律进社区活动总结
2015/05/07 职场文书
实习单位意见
2015/06/04 职场文书
八年级作文之感恩
2019/11/22 职场文书
我家女友可不止可爱呢 公开OP主题曲无字幕动画MV
2022/04/11 日漫