前一阵子写了一些代码，都是关于一个按钮点击切换状态的按钮，当时没有想周到就用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. MRCTF Ezpop_Revenge小记

    前言 一道typecho1.2的反序列化,顺便记录一下踩的坑 www.zip获得源码,结构大致如下 flag.php需要ssrf,如果成功会写入session 拿到源码直接去网上先找了一下有没有现成的 ...

  2. HTML+CSS教程（六）浮动-float+定位-position+居中问题

    一.浮动(float)1.文档流:是指盒子按照 html 标签编写的顺序依次从上到下,从左到右排列,块元素占一行,行内元素在一行之内从左到右排列,先写的先排列,后写的排在后面,每个盒子都占据自己的位置 ...

  3. mysql参数max_binlog_cache_size设置不当引发的血案

    日常运维中的坑真是防不胜防,不一小心就遇到别人给你挖的坑.最近又遇到经验不足的DBA不知道从哪拷贝的配置文件(据说是当时参加某培训机构视频培训是资料里的模板,真的是误人子弟呀),其中把max_binl ...

  4. UnicodeDecodeError: 'gbk' codec can't decode byte 0x8a in position 2: illegal multibyte sequence

    pycharm报错UnicodeDecodeError: 'gbk' codec can't decode byte 0x8a in position 2: illegal multibyte seq ...

  5. socket小计

    socket,是一个实现了双向通信的链接. 将http比喻为轿车,承载数据.传递数据,那么socket,就是轿车的发动机,它轿车动起来.

  6. 2019-2020-1 20199308《Linux内核原理与分析》第五周作业

    <Linux内核分析> 第四章 系统调用的三层机制(上) 4.1 用户态.内核态和中断 与系统调用打交道的方式是通过库函数的方式 用户态与内核态的区分 内核态:高的执行级别下,代码可以执行 ...

  7. XSS Challenge（1）

    XSS Challenges http://xss-quiz.int21h.jp/ Stage #1 注入alert(document.domain),先试一试输入后会返回什么: 返回在标签中,直接尝 ...

  8. eclipse安装Axis2插件和简单的webservice发布

    2019独角兽企业重金招聘Python工程师标准>>> Axis2与CXF是现在很主流的WebService开发框架(java6也已经支持了),项目上还都是基本上用前两种做开发,今天 ...

  9. $_server[]关于浏览器和服务器的参数获取

    $_SERVER['USER'] www $_SERVER['HOME'] /home/www $_SERVER['HTTP_UPGRADE_INSECURE_REQUESTS'] 1 $_SERVE ...

  10. 手把手教你用Rancher创建产品质量数据库设置

    目标:在本文中,我们将介绍如何运行一个分布式产品质量数据库设置,它由Rancher进行管理,并且保证持久性.为了部署有状态的分布式Cassandra数据库,我们将使用Stateful Sets (有状 ...