jQery动态添加删除类样式

添加类样式：

 // 例如为一类类名为cs-li-char的li元素添加新样式'default'$('.cs-li-char').addClass('default');

删除类样式

 // 为一类类名为cs-li-char的li元素移除样式'default'$('.cs-li-char').removeClass('default');

举个?：
有一个list列表：

<div><ul><li class="cs-li-char default">第一行</li><li class="cs-li-char ">第二行</li><li class="cs-li-char ">第三行</li></ul>
</div>

所有定义的样式：

<style type="text/css">.cs-li-char{list-style: none;width: 300px;margin-top: 10px;border: 1px solid #f0f0f0;}.default{background-color: #00af0e;color: white;}
</style>

给每一个li绑定点击事件，点击后移除所有的default样式，再给当前点击的li添加default样式【代码】：

<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">$(document).ready(function () {$('.cs-li-char').on('click',function (e) {console.log('dddd:'+$(this).attr('class'));$('.cs-li-char').removeClass('default');$(this).addClass('default');}) ;});
</script>

默认选中的是第一行：

点击第三行，通过jQuery动态操作li的类属性后：

全部代码【jQuery引用除外】：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">.cs-li-char{list-style: none;width: 300px;margin-top: 10px;border: 1px solid #f0f0f0;}.default{background-color: #00af0e;color: white;}</style>
</head><body><div><ul><li class="cs-li-char default">第一行</li><li class="cs-li-char ">第二行</li><li class="cs-li-char ">第三行</li></ul></div><script type="text/javascript" src="../js/jquery.js"></script><script type="text/javascript">$(document).ready(function () {$('.cs-li-char').on('click',function (e) {// console.log('dddd:'+this);$('.cs-li-char').removeClass('default');$(this).addClass('default');}) ;});</script>
</body>
</html>

jQery动态添加删除类样式相关推荐

jQuery使用toggleClass方法动态添加删除Class样式的方法
本文实例讲述了jQuery使用toggleClass方法动态添加删除Class样式的方法.分享给大家供大家参考.具体分析如下: jQuery通过toggleClass方法动态添加删除Class,一次执 ...
JQuery动态添加/删除class样式
有时我们会对某个控件的class样式进行获取.添加.修改.删除.下面是简单整理的一些实例用法: html样例代码如下: <ul class="pro_list fl cont" ...
如何给Vue v-for循环渲染出的元素（导航栏）批量添加点击事件及点击后添加css类样式及点击后路由跳转切换
如何给Vue v-for循环渲染出的元素批量添加点击事件及点击后添加css类样式及点击后路由跳转切换能够实现或解决的问题给Vue v-for循环出的元素批量添加点击事件,并以自己在数组中 ...
使用API动态添加删除菜单项
使用API动态添加删除菜单项 unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, ...
android仿微信发布动态功能,Android GridView扩展仿微信微博发图动态添加删除图片功能.pdf...
Android GridView扩扩展展仿仿微微信信微微博博发发图图动动态态添添加加删删除除图图片片功功能能这篇文章主要为大家详细介绍了Android GridView扩展仿微信微博发图动态添加删除 ...
动态添加/删除HTML元素
动态添加/删除HTML元素 <HTML> <HEAD> <title>动态添加/删除HTML元素</title> <style type=&quo ...
html怎样做删除的图标,bootstrap如何添加删除图标样式？
bootstrap如何添加删除图标样式?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. Bootstrap 捆绑了 200 多种字体格式的字形.首先让我们 ...
Quartz 分布式定时任务动态添加删除定时任务
首先对于Quartz的原理和使用这里不再做赘述和讲解,相信大家可以自信查阅文档进行使用.先说一下个人的这个使用背景:项目中需要引入定时任务,框架是springcloud分布式系统然后调研之后决定引入Q ...
jquery动态添加列表后样式失效解决方式
最近在做一个通讯录,使用jquery mobile方式来做,在动态添加列表后,listview原有的样式失效,折腾一会,找出解决办法.代码如下. <%@ page language=" ...
android 动态添加删除控件,求教Android，动态添加到控件能动态删除吗？
protected View createView() {//动态添加组件 Button btn = new Button(this);//动态创建按钮 btn.setId(index++); btn ...

jQery动态添加删除类样式

jQery动态添加删除类样式相关推荐

最新文章

热门文章