【技术】点击后变色(jQuery的removeClass和addClass)

实例见锐意先行《手机test》中《手机test5》。

针对a写两段样式:

.nav_ul > li > a {
    display: block;
    background: url(‘images/down.png‘) no-repeat scroll right center transparent;
    padding: 10px 0px;
    border-bottom: 1px solid #E2E2E2;
    color: #000;
    font-size: 1.5em;
    transition: all 0.4s ease 0s;
}

/*点击前的color是#000;*/
.nav_ul > li > a.color{
    color: #E60012;
}

/*点击后的color是#E60012;*/

JS代码:

<script type="text/javascript">

$(document).ready(function(){
    $(‘#js_nav_ul li a‘).click(function(){
        $(‘#js_nav_ul li > a‘).removeClass(‘color‘);
        $(this).addClass(‘color‘);
    });
});
</script>

//removeClass() 方法从被选元素移除一个或多个类。

addClass() 方法向被选元素添加一个或多个类。

该方法不会移除已存在的 class 属性,仅仅添加一个或多个 class 属性。

提示:如需添加多个类,请使用空格分隔类名。

代码先写removeClass() ,去掉原先的样式color: #000;

后写addClass(),追加新样式 color: #E60012;。

时间: 2024-07-28 13:52:21

【技术】点击后变色(jQuery的removeClass和addClass)的相关文章

jquery hasClass、removeClass、addClass方法

hasClass(class) 检查当前的元素是否含有某个特定的类,如果有,则返回true. 参数: class:用于匹配的类名. -------------------------------------------------------------------------------------------- removeClass([class]) 从所有匹配的元素中删除全部或者指定的类. 参数: class(可选):一个或多个要删除的CSS类名,请用空格分开. ------------

微信开发之jQuery的removeClass

今天为了解决一个bug折腾了好几个小时,结果竟然是小小的removeClass惹的祸 项目是微信企业号开发,企业号中有一个应用的页面是用js+css控制li模拟radio的选中状态,其中移除li的选中状态用到了obj.removeClass('active'); 当时有两个li标签,经过多次测试发现,当第二次选中某一个li标签时(假设有A,B两个li标签,当点击A之后点击B再点击A的时候,或者连续点击A的时候),获取不到此标签li[class='active'].在我和PM两个人近乎崩溃的情况下

【技术分享】JQuery Mobile转场分析

关于使用JQM(JQuery Mobile)看到很多人提出的第一句话就是性能不行,再问就是转场闪屏等.这里就分享下我对转场的一些学习成果. JQM的转场实际上利用的全部是CSS,只是简单的一个addClass 和removeClass.下面是带动画转场的函数 Java script代码   function css3TransitionHandler( name, reverse, $to, $from ) { var deferred = new $.Deferred(), reverseCl

93G通过项目学PHP+Ajax+jQuery网站开发技术 PHP+Ajax+jQuery项目实战课程

===============课程目录===============<项目一:PHP网站搭建>├1.认识PHP.mp4├2.常用编辑工具.mp4├3.开发环境搭建.mp4├4.配置虚拟主机.mp4└5.项目部署.mp4<项目二 学生信息管理>├1.PHP标记与注释.mp4├2.标识符与关键字.mp4├3.变量与常量.mp4├4.数据类型.mp4├5.输出语句.mp4├6.任务一:展示学生资料.mp4├7.date()函数.mp4├8.PHP运算符.mp4├9.运算符优先级.mp4├

css之链接 | 点击后变色 | 悬停 | hover

效果:悬停时显示背景绿色,点击后链接变为粉色 举例:

[ jquery 方法 removeClass([class|fn]) ] 此方法为每个匹配的元素删除指定的类名

从所有匹配的元素中删除全部或者指定的类: 如果参数是callback,那么需要返回的是属性名,函数传参解释如下: 1. index参数为对象在这个集合中的索引 2. class参数为这个对象原先的class属性值 实例: <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title> <meta http-equiv='description' conte

JAVA技术分享:jQuery浅析

# jQuery浅析 ## 一 jQuery概述 jQuery就是一个js库,里面封装了很多js的方法,相当于是一个外部的js文件. ### 1.快速入门 1) 导库 2)在scrpit中直接使用jquery即可. ```html <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script> <script> $( function(){ $("

每日技术总结:jquery datetimepicker,

前言: 1.jquery datetimepicker 今天遇到一个日期控件格式的问题,默认选中显示的并不是设定的值,而是当天的日期.于是去查了一遍文档. 参考文章:jquery datetimepicker 配置参数 官方文档:DateTimePickerjQuery plugin select date and time (找了很久) 耗时2小时,翻了无数遍网页,最后亲自去看插件源码,突然灵光一现,发现只是input value的格式传错了,冤啊!! Html代码如下: <head> &l

arcgis andriod 点击后变色

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent"> <com.esri.