1. <!DOCTYPE html>
  2. <html>
  3. <head lang="zh-CN">
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <style>
  7.     .sms-type button{
  8.     width: 60px;
  9.     height: 30px;
  10.     margin-right: 10px;
  11.     border: #d0d0d0 1px solid;
  12.     background-color: #f5f5f5;
  13.     border-radius: 4px;
  14.     -webkit-border-radius: 4px;
  15.     -moz-border-radius: 4px;
  16.     outline: none;
  17.     cursor: pointer;
  18. }
  19. .sms-type button.on-sel{
  20.     border: #ff7e0e 1px solid;
  21.     background-color: #fff0c5;
  22. }
  23.     </style>
  24.     <script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
  25.     <script type="text/javascript">
  26.             function  replyDetailClick(){
  27.             $(".reply-details .sms-type button").click(function(){
  28.             $(".reply-details .sms-type button").removeClass("on-sel");
  29.             $(this).addClass("on-sel");
  30.         })
  31.     }
  32.             function getButtonId(){
  33.             $(".sms-type button").click(function(){
  34.                     var buttonId = $(this).attr("id");
  35.                     alert("buttonId："+buttonId);
  36.                 });
  37.     }
  38.  
  39.             $(document).ready(function() {
  40.                 replyDetailClick();
  41.                 getButtonId();
  42.               });
  43.     </script>
  44.  
  45. </head>
  46. <body>
  47. <div class="reply-details">
  48.             <div>
  49.                 <label class="sms-type">
  50.                     <button  id="all" class="on-sel">全部</button>
  51.                     <button id="one">1</button>
  52.                     <button id="two">2</button>
  53.                     <button id="three">3</button>
  54.                     <button id="other">其他</button>
  55.                 </label>
  56.             </div>
  57.         </div>
  58. </body>
  59. </html>

全部 1 2 3 其他

button点击切换，获取按钮ID的更多相关文章

  1. 点击鼠标获取元素ID

    原文:点击鼠标获取元素ID public partial class Form1 : Form { public Form1() { InitializeComponent(); } private ...

  2. Taro button点击切换选中状态

    1.引入组件 2.state中设置选中状态 // button按钮的默认选中,0代表选中 state = { currentIndex: 0 } 3.设置class的样式,点击更改选中 selectN ...

  3. Android Button点击效果（按钮背景变色、文字变色）

    一. 说明 Android Button的使用过程中,我们会需要为Button添加点击效果,不仅仅按钮的背景色需要变化,而且有时,我们连文字的颜色都希望变化,我们可以使用StateListDrawab ...

  4. $工具, 属性, TAB点击切换

    $工具方法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit ...

  5. 利用DOM的方式点击切换图片及修改文字

    本案例主要学习理解,用到的几个DOM方法 01.getAttribute()方法,获取元素的属性值 02.setAttribute('src',source) 方法,用后边的值修改前边这个元素的属性值 ...

  6. Swift - 获取、改变按钮的标题文本（UIButton点击切换title）

    在开发中,我们常常需要动态地改变按钮标签文字,使用 setTitle() 函数就可以了.有时我们需要在几个标题间切换,比如下面样例所示,按钮点击后按钮文字会在"播放""暂 ...

  7. jquery——左右按钮点击切换一组图片功能

    一.最终效果 二.功能分析 1.需求分析 点击左边pre按钮,显示前面三个图片,点击右边的next按钮,显示后面的一组(三个)图片.初始化只显示next按钮,到最后一组只显示pre按钮,中间过程两按钮 ...

  8. NX二次开发-获取按钮的ID UF_MB_ask_button_id

    NX9+VS2012 1.打开D:\Program Files\Siemens\NX 9.0\UGII\menus\ug_main.men 找到装配和PMI,在中间加上一段 TOGGLE_BUTTON ...

  9. .net学习之母版页执行顺序、jsonp跨域请求原理、IsPostBack原理、服务器端控件按钮Button点击时的过程、缓存、IHttpModule 过滤器

    1.WebForm使用母版页后执行的顺序是先执行子页面中的Page_Load,再执行母版页中的Page_Load,请求是先生成母版页的控件树,然后将子页面生成的控件树填充到母版页中,最后输出 2.We ...

随机推荐

  1. 看漫画学Flux

    原文地址:A cartoon guide to Flux - by Lin Clark Flux在目前web开发中最受欢迎也较不被人理解,本文会以简单易懂的方式解释它. 出现问题 首先,我要声明Flu ...

  2. Linux--初次体验

    关于Linux已经听闻很久的大名了,但是一直没有机会来使用,这次趁着放假的机会,来体验一把Linux吧. 之前使用visuabox和Ubuntu16,但是虚拟机总是不能连接互联网,在虚拟机上面无法上网 ...

  3. 可空类型 Nullable<T>

    Nullable<T> 内部实现了显示和隐式转换 显示转换: public static explicit operator T(T? value) { return value.Valu ...

  4. WPF自定义控件与样式-自定义按钮（Button）

    一.前言 程序界面上的按钮多种多样,常用的就这几种:普通按钮.图标按钮.文字按钮.图片文字混合按钮.本文章记录了不同样式类型的按钮实现方法. 二.固定样式的按钮 固定样式的按钮一般在临时使用时或程序的 ...

  5. vue-cli webpack3扩展多模块打包

    场景 在实际的项目开发中会出现这样的场景,项目中需要多个模块(单页或者多页应用)配合使用的情况,而vue-cli默认只提供了单入口打包,所以就想到对vue-cli进行扩展 实现 首先得知道webpac ...

  6. httpClient解决post请求重定向的问题

    import com.dadi.saas.util.HTTPUtils; import org.apache.commons.httpclient.Header; import org.apache. ...

  7. python flask框架 蓝图的使用

    蓝图的目的是实现 各个模块的视图函数写在不同的py文件当中. 主视图 中 导入 分路由视图的模块,并且注册蓝图对象 分路由视图中 利用 蓝图对象 的route 进行装饰视图函数 主路由视图函数: #c ...

  8. Python之递归函数

    递归函数 初识递归函数 递归函数的定义:在一个函数里再调用这个函数本身 Python为了考虑保护内存占用情况,有一个递归深度的限制. 探究递归的默认最大深度: def foo(n): print(n) ...

  9. JS中的数据类型和转换

    一.JS中的数据类型 js中的数据类型可以分为五种:number .string .boolean. underfine .null. number:数字类型 ,整型浮点型都包括. string:字符 ...

  10. 如何用webgl(three.js)搭建一个3D库房-第二课

    闲话少叙,我们接着第一课继续讲(http://www.cnblogs.com/yeyunfei/p/7899613.html),很久没有做技术分享了.很多人问第二课有没有,我也是抽空写一下第二课. 第 ...