1、HTML代码,如下图:

<p class="sc_member_recharge_form">
<span class="selected">20元</span>
<span >50元</span>
<span >100元</span>
<span >200元</span>
<span >300元</span>
<span >其它金额</span>
</p>

2、jQuery代码,如下图:

<script>
$(document).ready(function(){
$(".sc_member_recharge_form span").click(function(){
var select = $(this).text();
if(select === 'other amount' || select === '其它金额'){
$(".sc_member_recharge_form span").removeClass("selected");
$(this).addClass("selected");
}else{
$(".sc_member_recharge_form span").removeClass("selected");
$(this).addClass("selected");
} });
});
</script>

jQuery实现单击某个标签改变样式的更多相关文章

  1. javascript和jquery 移除事件 和 改变样式

    javascript移除事件: document.getElementById("word").onmouseover = null; javascript改变样式: docume ...

  2. jquery获取和失去焦点改变样式

    第一种:(文本框获取焦点后,它的颜色会有所变化,当失去焦点的时候,恢复为原来的样子) <html> <meta http-equiv="Content-Type" ...

  3. 标签(改变样式style)

    id可以换为class,class对应的名字可以多个一样 <div class="box">box1</div> <div class="b ...

  4. 用JS改变页面中b标签的样式啊 样式的等

    用JS改变页面中b标签的样式啊 样式的等    ,实际上是在标签内加上样式 ,用媒体查询的话 ,不能生效 <!DOCTYPE html> <html lang="en&qu ...

  5. 使用 jQuery 基本选择器获取页面元素,然后利用 jQuery 对象的 css() 方法动态设置 <span> 和 <a> 标签的样式

    查看本章节 查看作业目录 需求说明: 使用 jQuery 基本选择器获取页面元素,然后利用 jQuery 对象的 css() 方法动态设置 <span> 和 <a> 标签的样式 ...

  6. jQuery入门(2)使用jQuery操作元素的属性与样式

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  7. [置顶] JQuery实战总结三 标签页效果图实现

    在浏览网站时我们会看到当我们鼠标移到多个选项卡上时,不同的选项卡会出现自己对应的界面的要求,在同一个界面上表达了尽量多的信息.大大额提高了空间的利用率.界面的切换效果也是不错的哦,这次自己可以实现啦. ...

  8. JQuery实战总结三 标签页效果图实现

    在浏览网站时我们会看到当我们鼠标移到多个选项卡上时,不同的选项卡会出现自己对应的界面的要求,在同一个界面上表达了尽量多的信息.大大额提高了空间的利用率.界面的切换效果也是不错的哦,这次自己可以实现啦. ...

  9. 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

    本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...

随机推荐

  1. http无状态

    说http无状态,客户端请求,建立一个链接,请求完毕既会关掉连接,避免占用通道,对处理业务逻辑没有记忆功能

  2. Tomcat常用的过滤器

    前言 之前我很肤浅的以为为了实现某种请求过滤功能(比如图片转换.文件上传.安全认证等),都需要自己去实现javax.servlet.Filter.之后在web.xml中配置即可. 但事实上,Tomca ...

  3. .Net语言 APP开发平台——Smobiler学习日志:SmoOne新增考勤功能

    大家好!SmoOne这次新增了考勤功能,大家打开SmoOne应用便可体验,无需重新下载更新.如果没有下载SmoOne客户端,可以在apps.smobiler.com进行下载安装. 另外,SmoOne开 ...

  4. .net core mvc 区域路由设置(配置)

    写博客原因:添加了区域(用作后台)后,报错: An unhandled exception occurred while processing the request.AmbiguousActionE ...

  5. ASP.NET MVC Session 过期验证跳转至登入页面

    一.在要检查登入的控制器上继承 CheckLoginController 类 2. CheckLoginController 类的写法 using System; using System.Colle ...

  6. java开发环境配置——JDK

    虽然网上有很多类似的文章了,第一次搭的时候也是看的网上的文章,但为了做个记录,自己也写一下,记录一下. 首先是先安装JDK,JDK下载可以直接去官网下载,地址:http://www.oracle.co ...

  7. 01-css的引入方式

    [转]01-css的引入方式 引入css方式(重点掌握) 行内样式 内接样式 外接样式 3.1 链接式 3.1 导入式 css介绍 现在的互联网前端分三层: HTML:超文本标记语言.从语义的角度描述 ...

  8. 后端开发者的Vue学习之路(二)

    目录 上篇内容回顾: 数据绑定 表单输入框绑定 单行文本输入框 多行文本输入框 复选框checkbox 单选框radio 选择框select 数据绑定的修饰符 .lazy .number .trim ...

  9. Netty学习笔记(五) 使用Netty构建静态网页服务器

    昨天在继续完善基于Netty构建的聊天室系统的过程中,发现了一个有意思的知识点,特此拿来做一个简单的静态网页服务器,好好的玩一玩Netty. 但是不管怎么说利用netty实现各种功能的流程都是类似的 ...

  10. ASP.NET Core 入门教程 8、ASP.NET Core + Entity Framework Core 数据访问入门

    一.前言 1.本教程主要内容 ASP.NET Core MVC 集成 EF Core 介绍&操作步骤 ASP.NET Core MVC 使用 EF Core + Linq to Entity ...