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属性和元素属性的区分值得 ...
随机推荐
- C#工具:Bootstrap WPF Style,Bootstrap风格的WPF样式
简介 GitHub地址:https://github.com/ptddqr/bootstrap-wpf-style 此样式基于bootstrap-3.3.0,样式文件里的源码行数都是指的这个版本.CS ...
- [android]常见的adb指令
/**********************2016年4月23日 更新**************************************/ 知乎:在windows的cmd执行adb she ...
- 解决echarts饼图不显示数据为0的数据
如图所示 饼图数据为0但是还是会显示lableline和lable 解决方法 var echartData = [{ value: data_arry[0]==0?null:data_arry[0], ...
- jsp基础语言-jsp指令
jsp编译指令用于设置jsp程序的属性以及由jsp生成的servlet中的属性. jsp常用的编译指令有3个:include指令.page指令.taglib指令. 一.page指令 1.概念:用来设置 ...
- 【Dojo 1.x】笔记2 使用服务器环境及使用模块
又开坑了.上次静态html页面完成本地module的引用,算是成功了,但是并不知道是怎么运作的,没关系慢慢来. 我用的环境是VSCode,这次因为官方说要在服务器环境下运行,所以就用上了VSCode的 ...
- Android网页打开指定App
一.只打开APP操作 通过用手机的浏览器(内置,第三方都可)访问一个网页,实现点击一个链接启动自己的应用,并传递数据. 首先在Mainifest文件里面对要启动的Activity添加一个过滤器. 网页 ...
- 跨进程SharedPreferences异常。
诡异的SharedPreferences异常,在ACC之后,SharedPreferences获取不到值了,但是另一个应用可以获取到值.同样的方法,一个正常一个异常. Context c = null ...
- TomCat的安装及测试
1.每个版本的安装都是一样,解压之后是一个文件夹 2.配置环境变量,右击我的电脑,属性--高级属性设置--环境变量--新建--配path即可(path后加;%CATALINA_HOME%\bin;) ...
- Pycharm使用技巧(转载)
Pycharm使用技巧(转载) 转载自:http://www.cnblogs.com/cloudtj/articles/5980666.html pycharm使用技巧 https://python. ...
- Navicat如何导出Excel格式表结构
SELECTCOLUMN_COMMENT 字段名,COLUMN_NAME code,COLUMN_TYPE 数据类型,DATA_TYPE 字段类型,CHARACTER_MAXIMUM_LENGTH 长 ...