<!DOCTYPE html>

<html>

<head lang="zh-CN">

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <style>

    .sms-type button{

    width: 60px;

    height: 30px;

    margin-right: 10px;

    border: #d0d0d0 1px solid;

    background-color: #f5f5f5;

    border-radius: 4px;

    -webkit-border-radius: 4px;

    -moz-border-radius: 4px;

    outline: none;

    cursor: pointer;

}

.sms-type button.on-sel{

    border: #ff7e0e 1px solid;

    background-color: #fff0c5;

}

    </style>

    <script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>

    <script type="text/javascript">

            function  replyDetailClick(){

            $(".reply-details .sms-type button").click(function(){

            $(".reply-details .sms-type button").removeClass("on-sel");

            $(this).addClass("on-sel");

        })

    }

            function getButtonId(){

            $(".sms-type button").click(function(){

                    var buttonId = $(this).attr("id");

                    alert("buttonId："+buttonId);

                });

    }

            $(document).ready(function() {

                replyDetailClick();

                getButtonId();

              });

    </script>

</head>

<body>

<div class="reply-details">

            <div>

                <label class="sms-type">

                    <button  id="all" class="on-sel">全部</button>

                    <button id="one">1</button>

                    <button id="two">2</button>

                    <button id="three">3</button>

                    <button id="other">其他</button>

                </label>

            </div>

        </div>

</body>

</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. 【ASP.NET Core】依赖注入高级玩法——如何注入多个服务实现类

    依赖注入在 ASP.NET Core 中起中很重要的作用,也是一种高大上的编程思想,它的总体原则就是:俺要啥,你就给俺送啥过来.服务类型的实例转由容器自动管理,无需我们在代码中显式处理. 因此,有了依 ...

  2. Jenkins 安装、配置与项目新建及构建

    1.Jenkins的安装与配置 1.1 java环境配置 Jenkins基于Java, Linux下安装java只要配置java环境变量即可. 首先,解压java到相应目录,我一般习惯把安装的软件放到 ...

  3. 租户、租户管理员、部门管理员和开发者在APIGW中的角色

    一.参与者 1.vdcId:租户 2.运营管理员 operator: 一种角色 创建开发商 审批外置服务,如:hadoop集群 审批内置服务,如:<API使用申请> 3.租户管理员     ...

  4. Android TabLayout 在宽屏幕上tab不能平均分配的问题解决

    当TabLayout 在宽屏幕的设备上,如平板横屏的时候,tab的宽度超过一定值后,就不在平均分配宽度,而是居中显示.此时设置 app:tabMode="fixed"或者 top_ ...

  5. 相同域名不同端口的两个应用，cookie名字、路径都相同的情况下，会覆盖吗

    首先答案是: 会的. 本地测试流程: 两个相同的应用,代码完全相同:只是部署在两个不同的tomcat:域名都是localhost 应用A:部署在http://localhost:8087/ 应用B:部 ...

  6. Spark:reduceByKey函数的用法

    reduceByKey函数API: def reduceByKey(partitioner: Partitioner, func: JFunction2[V, V, V]): JavaPairRDD[ ...

  7. scrapy的命令行

    scrapy --help 列出帮助信息以及常用命令scrapy version 列出scrapy版本scrapy version -v 列出详细的scrapy版本以及各组件信息 scrapy sta ...

  8. [转]pycharm常用快捷键及设置

    PyCharm3.0默认快捷键(翻译的) PyCharm Default Keymap 1.编辑(Editing) Ctrl + Space    基本的代码完成(类.方法.属性)Ctrl + Alt ...

  9. 在vue项目中, mock数据

    1. 在根目录下创建 test 目录, 用来存放模拟的 json 数据, 在 test 目录下创建模拟的数据 data.json 文件 2.在build目录下的 dev-server.js的文件作如下 ...

  10. 原生js的一些研究和总结(1)

    数据类型 基本类型值包括: undefined,null,Boolean,Number和String,这些类型分别在内存中占有固定的大小空间,它们的值保存在栈空间,我们通过按值来访问的. 引用类型包括 ...