jquery怎么在点击li标签之后添加一个在class,点击下一个li时删除上一个class?
2015-11-30 21:05
701 查看
思路:点击当前li元素后是用removeClass()删除所有兄弟元素(使用siblings()获取)的class样式,然后使用addClass()为当前li添加class。
具体演示如下:
1、HTML结构:设计三个li元素
<ul id="test">
<li>Glen</li>
<li>Tane</li>
<li>John</li>
</ul>
2、css样式:设计一个类selected,表示选中后的效果
<style>
.selected{font-weight:bold; background: #ff99cc; color:#fff;}
</style>
3、jquery代码:
$(function(){
$("#test li").click(function() {
$(this).siblings('li').removeClass('selected'); // 删除其他兄弟元素的样式
$(this).addClass('selected'); // 添加当前元素的样式
});
});
4、效果演示:
具体演示如下:
1、HTML结构:设计三个li元素
<ul id="test">
<li>Glen</li>
<li>Tane</li>
<li>John</li>
</ul>
2、css样式:设计一个类selected,表示选中后的效果
<style>
.selected{font-weight:bold; background: #ff99cc; color:#fff;}
</style>
3、jquery代码:
$(function(){
$("#test li").click(function() {
$(this).siblings('li').removeClass('selected'); // 删除其他兄弟元素的样式
$(this).addClass('selected'); // 添加当前元素的样式
});
});
4、效果演示:
相关文章推荐
- 【转】获取URL中的 参数
- jQuery绑定事件
- jquery一点事
- jQuery倒计时插件
- JQuery Mobile 的引用代码,以及在手机浏览器上字体太小的解决办法
- jQuery实现ajax提交form表单(可以是提交json),用springmvc接收。图文详解
- jquery checkbox 点击事件
- JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
- jquery中怎么删除<ul>中的整个<li>包括节点
- 基于Jquery实现焦点图淡出淡入效果
- jquery尺寸:宽度与高度
- 利用JQuery jsonp实现Ajax跨域请求 .Net 的*.handler 和 WebService,返回json数据
- jquery给height拼接动态变量
- JavaScript/Jquery:Validform 一句话验证表单内容
- jQuery ajax - post() 方法
- 轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
- jquery小技巧
- 轻松学习jQuery插件EasyUI EasyUI创建树形菜单
- Jquery Validation实用示例及讲解
- jquery- $.ajax请求映射springmvc中的@RequestBody