前一阵子写了一些代码，都是关于一个按钮点击切换状态的按钮，当时没有想周到就用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. python 基础篇 自定义函数

    多态 我们可以看到,Python 不用考虑输入的数据类型,而是将其交给具体的代码去判断执行,同样的一个函数(比如这边的相加函数 my_sum()),可以同时应用在整型.列表.字符串等等的操作中. 在编 ...

  2. 基于MySQL Binlog的Elasticsearch数据同步实践

    一.为什么要做 随着马蜂窝的逐渐发展,我们的业务数据越来越多,单纯使用 MySQL 已经不能满足我们的数据查询需求,例如对于商品.订单等数据的多维度检索. 使用 Elasticsearch 存储业务数 ...

  3. windows下部署.netcore+docker系列一（安装linux (ubuntu18.4)）

    1 下载 虚拟机和 linux 系统 版本是 ubuntu 链接:https://pan.baidu.com/s/1jTxdysoyOhSWD-Ea-7JIbg 提取码:iiad 2  首先要安装 虚 ...

  4. http与web

    在看<图解http>的时候,忽然有一个想法冒出来. web与http是什么关系? http服务器与web服务器有区别?为什么用以搞混了? web的定义:它是一种基于超文本和HTTP的.全球 ...

  5. Spring Boot JPA的查询语句

    文章目录 准备工作 Containing, Contains, IsContaining 和 Like StartsWith EndsWith 大小写不敏感 Not @Query Spring Boo ...

  6. weblogic创建域

    一.webLogic服务域创建 https://blog.csdn.net/github_38922197/article/details/75097320

  7. linux下报错：error while loading shared libraries

    linux执行bin程序报: error while loading shared libraries:libncurses.so.5: cannot open shared object file: ...

  8. Redis（三）：多机数据库的实现

    复制 在Redis中,用户可以通过SLAVEOF命令或是slaveof选项设置服务器的主从关系,从(SLAVE)服务器会复制主(Master)服务器. 旧版复制功能实现(2.8以前) 旧版复制功能主要 ...

  9. python基础1习题练习

    python基础1习题练习: #encoding:utf-8 #1.实现用户输入用户名和密码,当用户名为 seven 且 密码为 123 时,显示登陆成功,否则登陆失败! name=input('na ...

  10. ISA Introduction

    介绍一下X86.MIPS.ARM三种指令集: 1. X86指令集 X86指令集是典型的CISC(Complex Instruction Set Computer)指令集. X86指令集外部看起来是CI ...