关于jquery样式切换的一些想法
前一阵子写了一些代码,都是关于一个按钮点击切换状态的按钮,当时没有想周到就用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样式切换的一些想法的更多相关文章
- jQuery图片切换插件jquery.cycle.js
Cycle是一个很棒的jQuery图片切换插件,提供了非常好的功能来帮助大家更简单的使用插件的幻灯功能 下载cycle插件并引入,此时,注意把引入它的代码放在引入jQuery主文件之后. <he ...
- jQuery箭头切换图片 - 学习笔记
jQuery箭头切换图片 布局 3d位移 变形原点 jQuery transform:translate3d(x,y,z): x 代表横向坐标移向量的长度 y 代表纵向坐标移 ...
- 推荐几款jquery图片切换插件
一.前言 毕业季到了,大家都在匆匆忙忙的记录大学里最美好的时光,照片中各种花式.各种姿势都涌现出来了.这么多的照片怎么展示出来给自己的好友看呢?有人选择做成视频,有人选择ps之后做成图片集,而我选择利 ...
- FlexSlider jQuery滑动切换插件 参数
demo:http://www.sucaihuo.com/jquery/0/6/demo/ FlexSlider是一个非常出色的jQuery滑动切换插件,它支持所有主流浏览器,并有淡入淡出效果.适合所 ...
- jquery 回车切换 tab功能
挺有趣的,Jquery 回车切换tab功能的实现哦 <html> <head><!--jquery库.js--></head> <body> ...
- 基于jQuery上下切换的焦点图—带缩略图悬浮
分享一款基于jQuery上下切换的焦点图,这款焦点图带有缩略图悬浮,它的切换效果比较简单,仅仅是作图片的上下切换,但是效果还是比较流畅的.这款jQuery焦点图插件的另外一个特点是在播放器上面可以悬浮 ...
- FlexSlider是一个非常出色的jQuery滑动切换插件
FlexSlider是一个非常出色的jQuery滑动切换插件,它支持所有主流浏览器,并有淡入淡出效果.适合所有初级和高级网页设计师使用.不过很多人都只是使用默认的参数,今天来说说具体的参数来给大家看看 ...
- jquery mobile切换页面的几种方法
jquery mobile切换页面的几种方法 - 不厚道青蛙之焦油潭 - 博客频道 - CSDN.NET jquery mobile切换页面的几种方法 分类: phonegap html5 2012- ...
- jQuery动画切换引擎插件Velocity.js
Velocity.js 官网 Velocity.js实现弹出式相框 慕课网 极棒的jquery动画切换引擎插件Velocity.js jQ库 (function($){ // 普通调用 /*$('#d ...
随机推荐
- python 基础篇 自定义函数
多态 我们可以看到,Python 不用考虑输入的数据类型,而是将其交给具体的代码去判断执行,同样的一个函数(比如这边的相加函数 my_sum()),可以同时应用在整型.列表.字符串等等的操作中. 在编 ...
- 基于MySQL Binlog的Elasticsearch数据同步实践
一.为什么要做 随着马蜂窝的逐渐发展,我们的业务数据越来越多,单纯使用 MySQL 已经不能满足我们的数据查询需求,例如对于商品.订单等数据的多维度检索. 使用 Elasticsearch 存储业务数 ...
- windows下部署.netcore+docker系列一(安装linux (ubuntu18.4))
1 下载 虚拟机和 linux 系统 版本是 ubuntu 链接:https://pan.baidu.com/s/1jTxdysoyOhSWD-Ea-7JIbg 提取码:iiad 2 首先要安装 虚 ...
- http与web
在看<图解http>的时候,忽然有一个想法冒出来. web与http是什么关系? http服务器与web服务器有区别?为什么用以搞混了? web的定义:它是一种基于超文本和HTTP的.全球 ...
- Spring Boot JPA的查询语句
文章目录 准备工作 Containing, Contains, IsContaining 和 Like StartsWith EndsWith 大小写不敏感 Not @Query Spring Boo ...
- weblogic创建域
一.webLogic服务域创建 https://blog.csdn.net/github_38922197/article/details/75097320
- linux下报错:error while loading shared libraries
linux执行bin程序报: error while loading shared libraries:libncurses.so.5: cannot open shared object file: ...
- Redis(三):多机数据库的实现
复制 在Redis中,用户可以通过SLAVEOF命令或是slaveof选项设置服务器的主从关系,从(SLAVE)服务器会复制主(Master)服务器. 旧版复制功能实现(2.8以前) 旧版复制功能主要 ...
- python基础1习题练习
python基础1习题练习: #encoding:utf-8 #1.实现用户输入用户名和密码,当用户名为 seven 且 密码为 123 时,显示登陆成功,否则登陆失败! name=input('na ...
- ISA Introduction
介绍一下X86.MIPS.ARM三种指令集: 1. X86指令集 X86指令集是典型的CISC(Complex Instruction Set Computer)指令集. X86指令集外部看起来是CI ...