前一阵子写了一些代码，都是关于一个按钮点击切换状态的按钮，当时没有想周到就用addClass removeClass来控制这个控件的状态，后来想想觉得不妥。

<html>

<head>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

<script type="text/javascript">

$(function(){

$("ul li").click(function(e){

console.log(e.target);

   $(e.target).toggleClass("active")

});

})

</script>

<style type="text/css">

.normal{

 color:green;

}

.active{

color:red !important;

}

</style>

</head>

<body>

<ul>

<li class='normal'>关于jquery addClass</li>

<li class='normal'>关于jquery removeClass</li>

<li class='normal'>关于jquery hasClass</li>

<li class='normal'>关于jquery toggleClass</li>

</ul>

</body>

</html>

　　

关于jquery样式切换的一些想法的更多相关文章

  1. jQuery图片切换插件jquery.cycle.js

    Cycle是一个很棒的jQuery图片切换插件,提供了非常好的功能来帮助大家更简单的使用插件的幻灯功能 下载cycle插件并引入,此时,注意把引入它的代码放在引入jQuery主文件之后. <he ...

  2. jQuery箭头切换图片 - 学习笔记

    jQuery箭头切换图片 布局 3d位移 变形原点 jQuery transform:translate3d(x,y,z):        x 代表横向坐标移向量的长度       y 代表纵向坐标移 ...

  3. 推荐几款jquery图片切换插件

    一.前言 毕业季到了,大家都在匆匆忙忙的记录大学里最美好的时光,照片中各种花式.各种姿势都涌现出来了.这么多的照片怎么展示出来给自己的好友看呢?有人选择做成视频,有人选择ps之后做成图片集,而我选择利 ...

  4. FlexSlider jQuery滑动切换插件 参数

    demo:http://www.sucaihuo.com/jquery/0/6/demo/ FlexSlider是一个非常出色的jQuery滑动切换插件,它支持所有主流浏览器,并有淡入淡出效果.适合所 ...

  5. jquery 回车切换 tab功能

    挺有趣的,Jquery 回车切换tab功能的实现哦 <html> <head><!--jquery库.js--></head> <body> ...

  6. 基于jQuery上下切换的焦点图—带缩略图悬浮

    分享一款基于jQuery上下切换的焦点图,这款焦点图带有缩略图悬浮,它的切换效果比较简单,仅仅是作图片的上下切换,但是效果还是比较流畅的.这款jQuery焦点图插件的另外一个特点是在播放器上面可以悬浮 ...

  7. FlexSlider是一个非常出色的jQuery滑动切换插件

    FlexSlider是一个非常出色的jQuery滑动切换插件,它支持所有主流浏览器,并有淡入淡出效果.适合所有初级和高级网页设计师使用.不过很多人都只是使用默认的参数,今天来说说具体的参数来给大家看看 ...

  8. jquery mobile切换页面的几种方法

    jquery mobile切换页面的几种方法 - 不厚道青蛙之焦油潭 - 博客频道 - CSDN.NET jquery mobile切换页面的几种方法 分类: phonegap html5 2012- ...

  9. jQuery动画切换引擎插件Velocity.js

    Velocity.js 官网 Velocity.js实现弹出式相框 慕课网 极棒的jquery动画切换引擎插件Velocity.js jQ库 (function($){ // 普通调用 /*$('#d ...

随机推荐

  1. 【题解】P4570 [BJWC2011]元素 - 线性基 - 贪心

    P4570 [BJWC2011]元素 声明:本博客所有题解都参照了网络资料或其他博客,仅为博主想加深理解而写,如有疑问欢迎与博主讨论✧｡٩(ˊᗜˋ)و✧*｡ 题目描述 给你 \(n\) 个二元组 \( ...

  2. python-Django收集主机信息json格式

    Control: from django.conf.urls import patterns, include, url from django.contrib import admin admin. ...

  3. js上传文件前判断获取文件大小并且加以判断

    描述:要求浏览器单个上传文件大小不超过10M. 解决方案: var fileSize = $("#fileId")[0].files[0].size/(1024*1024);if( ...

  4. Java 多线程实现方式三：实现 Callable 接口

    完整套路 java 通过实现Callable 接口来实现多线程相比较于继承Thread 接口和 实现Runnable 接口比较麻烦,但好处是可以有返回值. 基本套路: 1. 创建目标对象 2. 创建执 ...

  5. SpringCloud-Alibaba-Nacos 服务注册中心&配置中心

    Spring Cloud Alibaba 由于 Spring Cloud Netflix 项目进入维护模式(将模块置于维护模式意味着 Spring Cloud 团队将不会再向模块中添加新功能,只会修复 ...

  6. 解决Cannot use a scalar value as an array

    这是类型转换的问题,看看上方代码是不是先把布尔值或者0值赋给了一个变量,然后下面循环中又把这个变量当作数组用了

  7. JVM相关参数设置

    Java启动参数共分为三类: 其一是标准参数(-),所有的JVM实现都必须实现这些参数的功能,而且向后兼容: 其二是非标准参数(-X),默认jvm实现这些参数的功能,但是并不保证所有jvm实现都满足, ...

  8. CentOS 7 + Win 双系统的安装遇到的重要问题

    前言:对于刚学linux的朋友们,多多小小因为各种原因需要装双系统,亦或者爱好使然.多数是问题解决,第一次装系统者不推荐看-. 那么现在内德在此就说说在本本上装双系统会遇到的问题及其解决方法. 环境准 ...

  9. T-SQL字符串函数

    整理下MSSQL中有关时间的函数,博客记录之. ASCII 原型:ASCII ( character_expression ) 返回值:int 类型值 功能:返回输入字符串最左边的一个字符的ASCII ...

  10. js之 DOM与BOM

    JavaScript HTML DOM (文档对象模型)(Document Object Model) 什么是DOM? DOM是W3C标准. DOM定义了访问文档的标准: “W3C文档对象模型(DOM ...