前一阵子写了一些代码，都是关于一个按钮点击切换状态的按钮，当时没有想周到就用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. response没有实现跳转,而是提示浏览器下载文件

    问题简述: web项目中,response没能实现重定向跳转网页,而是通知浏览器下载文件. 代码如下: response.getWriter().write("<h1 style='c ...

  2. Java8新特性(1)：Lambda表达式

    Lambda表达式可以理解为一种匿名函数:没有名称,但有参数列表.函数主体.返回类型.它是行为参数化的一种实现,行为参数化是指将不同的行为作为参数传递给方法,方法的所具备的能力取决于它接收的行为参数. ...

  3. 磁盘性能测试工具之fio

    fio是测试磁盘性能的一个非常好的工具,用来对硬件进行压力测试和验证. 注意事项 CentOS 6.5等较老版本的操作系统用fdisk创建分区时,默认为非4KB对齐选择初始磁柱编号,对性能有较大的影响 ...

  4. 一行配置美化 nginx 目录 autoindex.html

    demo

  5. Java面试系列第2篇-Object类中的方法

    Java的Object是所有引用类型的父类,定义的方法按照用途可以分为以下几种: (1)构造函数 (2)hashCode() 和 equals() 函数用来判断对象是否相同 (3)wait().wai ...

  6. spring-boot-lll-starter自动化框架介绍

    1. spring-boot-lll-starter自动化框架介绍 1.1. 前言 舔着脸来介绍一波我刚写的自动化框架,spring-boot-lll-starter框架是经由我企业实战总结的一套,适 ...

  7. [go]包和工程管理

    一.系统环境变量 GOROOT 指定go的安装目录,win是在 C\Go\,Linux在 /usr/local/go下,如果不是默认的目录,则需要指定 GOROOT环境变量,否则不需要 GOPATH ...

  8. iconv 参数详解

    参数详解: $row [] = iconv('utf-8', 'GB2312//IGNORE', $value['message']); iconv ( string $in_charset , st ...

  9. js点击事件，数字累加

    <!doctype html><html lang="en"><head>    <meta charset="utf-8&qu ...

  10. Python学习16之input函数

    '''''''''Input函数:作用:接受一个标准输入数据返回值:返回为 string 类型使用:input()'''a=input("请输入一个整数")print(a)prin ...