用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 相关文章推荐
idTabs基于JQuery的根据URL参数选择Tab插件
Apr 11 Javascript
javascript实现可改变滚动方向的无缝滚动实例
Jun 17 Javascript
jQuery点击弹出下拉菜单的小例子
Aug 01 Javascript
原生js的弹出层且其内的窗口居中
May 14 Javascript
html文档中的location对象属性理解及常见的用法
Aug 13 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
Nov 03 Javascript
jquery实现相册一下滑动两次的方法
Feb 09 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
Aug 01 Javascript
老生常谈Javascript中的原型和this指针
Oct 09 Javascript
获取JavaScript异步函数的返回值
Dec 21 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
Jan 03 Javascript
vue+web端仿微信网页版聊天室功能
Apr 30 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
神族 Protoss 历史背景
2020/03/14 星际争霸
php查询mssql出现乱码的解决方法
2014/12/29 PHP
php实现excel中rank函数功能的方法
2015/01/20 PHP
php传值赋值和传地址赋值用法实例分析
2015/06/20 PHP
PHP实现用户异地登录提醒功能的方法【基于thinkPHP框架】
2018/03/15 PHP
baidu博客的编辑友情链接的新的层窗口!经典~支持【FF】
2007/02/09 Javascript
javascript form 验证函数 弹出对话框形式
2009/06/23 Javascript
定时器(setTimeout/setInterval)调用带参函数失效解决方法
2013/03/26 Javascript
关于JavaScript中的关联数组分析
2013/04/09 Javascript
教你如何使用node.js制作代理服务器
2014/11/26 Javascript
jquery实现二级导航下拉菜单效果
2015/12/18 Javascript
JavaScript判断用户名和密码不能为空的实现代码
2016/05/16 Javascript
详解Node.Js如何处理post数据
2016/09/19 Javascript
nodejs个人博客开发第二步 入口文件
2017/04/12 NodeJs
3种vue组件的书写形式
2017/11/29 Javascript
使用Vue-cli 3.0搭建Vue项目的方法
2018/06/07 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
2018/08/07 Javascript
vue2.0父子组件间传递数据的方法
2018/08/16 Javascript
利用vue重构有赞商城的思路以及总结整理
2019/02/21 Javascript
NodeJS模块Buffer原理及使用方法解析
2020/11/11 NodeJs
vue 数据操作相关总结
2020/12/17 Vue.js
从零学python系列之新版本导入httplib模块报ImportError解决方案
2014/05/23 Python
python爬虫之BeautifulSoup 使用select方法详解
2017/10/23 Python
Python SSL证书验证问题解决方案
2020/01/13 Python
Python定义函数实现累计求和操作
2020/05/03 Python
使用python创建Excel工作簿及工作表过程图解
2020/05/27 Python
CSS3 实现的缩略图悬停效果
2020/12/09 HTML / CSS
应届生财务管理求职信
2013/11/06 职场文书
年度献血先进个人事迹材料
2014/02/14 职场文书
餐厅楼面部长岗位职责范文
2014/02/16 职场文书
《诺贝尔》教学反思
2014/02/17 职场文书
活动总结书
2014/05/08 职场文书
敬老模范事迹
2014/05/21 职场文书
学雷锋日活动总结
2015/02/06 职场文书
Python获取百度热搜的完整代码
2021/04/07 Python
Java实现带图形界面的聊天程序
2022/06/10 Java/Android