jQuery实现单击某个标签改变样式
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实现单击某个标签改变样式的更多相关文章
- javascript和jquery 移除事件 和 改变样式
javascript移除事件: document.getElementById("word").onmouseover = null; javascript改变样式: docume ...
- jquery获取和失去焦点改变样式
第一种:(文本框获取焦点后,它的颜色会有所变化,当失去焦点的时候,恢复为原来的样子) <html> <meta http-equiv="Content-Type" ...
- 标签(改变样式style)
id可以换为class,class对应的名字可以多个一样 <div class="box">box1</div> <div class="b ...
- 用JS改变页面中b标签的样式啊 样式的等
用JS改变页面中b标签的样式啊 样式的等 ,实际上是在标签内加上样式 ,用媒体查询的话 ,不能生效 <!DOCTYPE html> <html lang="en&qu ...
- 使用 jQuery 基本选择器获取页面元素,然后利用 jQuery 对象的 css() 方法动态设置 <span> 和 <a> 标签的样式
查看本章节 查看作业目录 需求说明: 使用 jQuery 基本选择器获取页面元素,然后利用 jQuery 对象的 css() 方法动态设置 <span> 和 <a> 标签的样式 ...
- jQuery入门(2)使用jQuery操作元素的属性与样式
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- [置顶] JQuery实战总结三 标签页效果图实现
在浏览网站时我们会看到当我们鼠标移到多个选项卡上时,不同的选项卡会出现自己对应的界面的要求,在同一个界面上表达了尽量多的信息.大大额提高了空间的利用率.界面的切换效果也是不错的哦,这次自己可以实现啦. ...
- JQuery实战总结三 标签页效果图实现
在浏览网站时我们会看到当我们鼠标移到多个选项卡上时,不同的选项卡会出现自己对应的界面的要求,在同一个界面上表达了尽量多的信息.大大额提高了空间的利用率.界面的切换效果也是不错的哦,这次自己可以实现啦. ...
- 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...
随机推荐
- 第6章 演示服务器和测试 - Identity Server 4 中文文档(v1.0.0)
您可以使用您喜欢的客户端库尝试IdentityServer4.我们在demo.identityserver.io上有一个测试实例.在主页面上,您可以找到有关如何配置客户端以及如何调用API的说明. 此 ...
- 设计模式-建造者模式(Builder)
简介: 将一个复杂的对象的构建与它的表示分离,使得同样的构建过程创建出不同的表示. 结构图: 优点: 使得创建代码和表示代码分离,建造者隐藏了该产品是如何组装的,所以若需要改变一个产品内部的表示,只需 ...
- 30.C++复习篇
本章学习内容: 1.const 2.指针const 3.inline内联函数 4.函数重载 5.extern “C” 6.new/delete声明与释放 7.namespace命名空间 8.C++中的 ...
- Java开发笔记(四十二)日历工具的常见应用
前面介绍了日历工具Calendar的基本用法,乍看起来Calendar与Date两个半斤八两,似乎没有多大区别,那又何苦庸人自扰鼓捣一个新玩意呢?显然这样小瞧了Calendar,其实它的作用大着呢,接 ...
- Sublime Text 快捷键列表
Sublime Text 快捷键列表 快捷键按类型分列如下: 补充:1.快速的创建一个html页 :ctrl+n创建一个新的文件-->右下角选择文件类型-->输入英文"!&quo ...
- WEB前端学习代码片段记录
1.JS设计模式片段 Function.prototype.addMethod = function (name,fn) { this.prototype[name] = fn; return thi ...
- 【代码笔记】Web-CSS-CSS Text(文本)
一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- asp.net core根据用户权限控制页面元素的显示
asp.net core根据用户权限控制页面元素的显示 Intro 在 web 应用中我们经常需要根据用户的不同允许用户访问不同的资源,显示不同的内容,之前做了一个 AccessControlHelp ...
- Django2.0 正则表示匹配的简单例子
在Django中,使用正则表达式,匹配Url 默认情况下,url固定格式如下: urlpatterns = [ path('admin/', admin.site.urls), ] 如果需要使用正则表 ...
- 如何关闭tornado.web的Application
研究热更新Python程序时,需要将已有的HTTP服务器重启. 我的HTTP服务器是用tornado.web.Application生成的,这样很简单: import tornado.web weba ...