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. DSAPI多功能组件编程应用-使用外部字体(包括资源文件)

    在软件开发过程中,尤其是比较个性化的程序,有时会需要使用非安装字体文件,比如发布的时候附带了一个专用字体,或者该字体文件直接被放入项目资源,当不希望把这个字体安装到用户的操作系统但又想使用它时,本示例 ...

  2. CSS-蜂窝状展示区域(多个六边形)的一种实现方式

    网上已经有很多关于正六边形的CSS画法,主要是利用一个矩形和前后的两个三角形组合而成. 之前在看四维图新的官网的时候,发现了一种六边形的画法,比较适合多排六边形组合成蜂窝状的展示区域(注:四维图新现在 ...

  3. ASP.NET Core 一步步搭建个人网站(1)_环境搭建

    ASP.NET Core2.0发布有一阵子了,这是.NET 开源跨平台的一个重大里程碑, 也意味着比1.0版本要更加成熟.目前.net core具有开源.跨平台.灵活部署.模块化架构等等特性,吸引着一 ...

  4. C#:在匿名方法中捕获外部变量

    先来一段代码引入主题.如果你可以直接说出代码的输出结果,说明本文不适合你.(代码引自<深入理解C#>第三版) class Program { private delegate void T ...

  5. WordCount结对项目

    合作者:201631062124,201631062423 代码地址:https://gitee.com/yryx/WordCount 作业地址:https://edu.cnblogs.com/cam ...

  6. C#窗体打包步骤

    1.在项目下选择InstallerProjects的Setup Project建立打包工具. 2.找到项目bin目录Release下的文件全部复制下来. 3.复制完之后全部粘贴到Application ...

  7. 【原】Java学习笔记001 - JAVA开发环境搭建

    1.JDK下载并安装,以jdk-7u45-windows-i586.exe为例(注意JDK的安装和JRE的安装是分开的) 2.“我的电脑”右键属性,找到“高级系统设置”,找到“高级”tab下的“环境变 ...

  8. windows下php7.1安装redis扩展以及redis测试使用全过程

    最近做项目,需要用到redis相关知识.在Linux下,redis扩展安装起来很容易,但windows下还是会出问题的.因此,特此记下自己实践安装的整个过程,以方便后来人. 一,php中redis扩展 ...

  9. LeetCode算法题-Merge Two Binary Trees(Java实现)

    这是悦乐书的第274次更新,第290篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第142题(顺位题号是617).提供两个二叉树,将其合并为新的二叉树,也可以在其中一个二 ...

  10. 超哥笔记 --nginx入门(6)

    一 NGINX 1 nignx是什么 nginx是一个开源的支持高性能,高并发的web服务和代理服务软件. nginx比他大哥apache性能改进许多,nginx占用的系统资源更少,支持高并发连接,有 ...