前一阵子写了一些代码，都是关于一个按钮点击切换状态的按钮，当时没有想周到就用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. Java数组模拟环形队列

    2.环形队列 (上一篇队列:https://www.cnblogs.com/yxm2020/p/12676323.html) 百度百科 1.假溢出 ​ 系统作为队列用的存储区还没有满,但队列却发生了溢 ...

  2. 感受python之美，python简单易懂的小例子

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 1 简洁之美 通过一行代码,体会Python语言简洁之美 2 Python ...

  3. mongoDB(一)——mongoDB安装部署和常用shell命令

    1.mongoDB简介 mongoDB 是由C++语言编写的,是一种分布式的面向文档存储的开源nosql数据库.nosql是Not Only SQL的缩写,是对不同于传统的关系型数据库的数据库管理系统 ...

  4. Java 网络编程 --基于UDP实现一对一聊天功能

    UDP 基本流程: UDP发送端基本流程: 1.使用DatagramSocket 指定端口 创建发送端 2.准备数据 一定转成字节数组 3. 封装成DatagramPacket 包裹,需要指定目的地 ...

  5. JasperReports入门教程(三)：Paramters，Fields和Detail基本组件介绍

    JasperReports入门教程(三):Paramter,Field和Detail基本组件介绍 前言 前两篇博客带领大家进行了入门,做出了第一个例子.也解决了中文打印的问题.大家跟着例子也做出了de ...

  6. 20199308《Linux内核原理与分析》第十一周作业

    缓冲区溢出漏洞实验 实验步骤 一.初始设置 1.Ubuntu 和其他一些 Linux 系统中,使用地址空间随机化来随机堆(heap)和栈(stack)的初始地址,这使得猜测准确的内存地址变得十分困难, ...

  7. Python封装应用程序的最佳项目结构是什么?

    Python封装应用程序的最佳项目结构是什么? 转载来源于stackoverflow:https://stackoverflow.com/questions/193161/what-is-the-be ...

  8. SQL语句学习（二）

    为一张表添加外键: 这里我们希望再建一张订单的表为t_order,包含order_id,customer_id和price: ) NOT NULL auto_increment PRIMARY KEY ...

  9. angular2相关

    脚手架安装一个项目 1.全局安装angular脚手架 npm install -g @angular/cli 2.初始化一个文件夹 ng new my-angular-demo 3.进入文件夹 cd ...

  10. 单源最短路径（3）：SPFA 算法

    SPFA(Shortest Path Faster Algorithm)算法,是西南交通大学段凡丁于 1994 年发表的,其在 Bellman-ford 算法的基础上加上一个队列优化,减少了冗余的松弛 ...