该文件引用jquery-1.11.3.js库
<!doctype html>

<html>

<head>

    <meta charset="UTF-8">

    <title>A标签样式</title>

    <style>

        .sel_btn{

            height: 21px;

            line-height: 21px;

            padding: 0 11px;

            background: #02bafa;

            border: 1px #26bbdb solid;

            border-radius: 3px;

            /*color: #fff;*/

            display: inline-block;

            text-decoration: none;

            font-size: 12px;

            outline: none;

        }

        .ch_cls{

            background: #e4e4e4;

        }

    </style>

    <script type="text/javascript" src="jquery-1.11.3.js"></script>

</head>

<body>

    &nbsp;&nbsp;&nbsp;&nbsp;

    <a class="sel_btn ch_cls" id="sel_btn1" href="#" onclick="changeSelBtn(1)">全天</a>

    <a class="sel_btn" id="sel_btn2" href="#" onclick="changeSelBtn(2)">上午</a>

    <a class="sel_btn" id="sel_btn3" href="#" onclick="changeSelBtn(3)">下午</a>

    <hr>

    <script type="text/javascript">

         function changeSelBtn(index){

            if(index==1){

                $("#sel_btn1").addClass('ch_cls');

                $("#sel_btn2").removeClass('ch_cls');

                $("#sel_btn3").removeClass('ch_cls');

            }else if(index==2){

                $("#sel_btn1").removeClass('ch_cls');

                $("#sel_btn2").addClass('ch_cls');

                $("#sel_btn3").removeClass('ch_cls');

            }else if(index==3){

                $("#sel_btn1").removeClass('ch_cls');

                $("#sel_btn2").removeClass('ch_cls');

                $("#sel_btn3").addClass('ch_cls');

            }

         }

    </script>

</body>

</html>

效果：

A标签-一个按钮样式的更多相关文章

  1. 输出字符串格式化/ Linq对数组操作 /一个按钮样式

    textBox1.Text = dateTimePicker1.Value.ToString("yyyy-MM-dd HH:mm:ss"); , , , , , , , , , , ...

  2. 5、Semantic-UI之基础按钮样式

    5.1 基础按钮样式   在Semantic-UI中定义了很多的按钮样式,可以通过class="ui button"来指定,也可以在class中指定颜色. 示例:定义基础按钮样式 ...

  3. Expression Blend4经验分享：制作一个简单的文字按钮样式

    首先在Grid里放一个TextBlock,对象时间线窗口的结构树如下 右键点击grid,选择构成控件 会弹出构成控件的对话框,选择你要构成的控件类型,控件名称,控件样式存储位置 这里我们选择butto ...

  4. Expression Blend4经验分享：制作一个简单的图片按钮样式

    这次分享如何做一个简单的图片按钮经验 在我的个人Silverlight网页上,有个Iphone手机的效果,其中用到大量的图片按钮 http://raimon.6.gwidc.com/Iphone/de ...

  5. Fixjs实践——标签、按钮控件

    Fixjs介绍 Fixjs是一款javascript界面基础框架,主要为开发复杂组件提供底层的框架支持. Fixjs 0.3.0主要增加了文本显示类fixjs.text.TextField 支持的主要 ...

  6. element ui 的Notification通知如何加 a 标签和按钮，并弹多个

    前言:工作中需要在页面右下角弹出很多个提醒框,提醒框上有一个可点击的a标签,并有一个按钮,同时还需要一次性关闭所有的弹出框.转载请注明出处:https://www.cnblogs.com/yuxiao ...

  7. 「HTML+CSS」--自定义按钮样式【002】

    前言 Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 哈哈 自我介绍一下 昵称:海轰 标签:程序猿一只|C++选手|学生 简介:因C语言结识编程,随后转入计算机 ...

  8. iOS系列 基础篇 06 标签和按钮 (Label & Button)

    iOS系列 基础篇 06 标签和按钮 (Label & Button) 目录: 标签控件 按钮控件 小结 标签和按钮是两个常用的控件,下面咱们逐一学习. 1. 标签控件 使用Single Vi ...

  9. 漂亮的CSS按钮样式集以及在线生成工具

    以前我们制作一样带带阴影.圆角或3D感的按钮都需要用图片来制作,但CSS3出来后就可以不用图片了,由于是代码写的按钮样式,在Retina上浏览依然清晰美观.虽然不错,但我们写一个阴影+质感的按钮还是挺 ...

随机推荐

  1. Web API CSRF保护实现

    Web API CSRF保护实现 这次自己实现了类似jQuery中ajax调用的方法,并且针对RESTFul进行了改造和集成,实现的A2D AJAX接口如下: $.ajax.RESTFulGetCol ...

  2. 字符转十六进制 String => HEX using "hexdump" on linux

    hexdump 是一款非常简单的有效的将别的形式的文档转换成十六进制的工具. 最详细的使用说明都在 man hexdump 里面,请自行查阅. 这里我摘出几个常用的例子,一目了然: 这里我做了一个实验 ...

  3. TOGAF架构内容框架之内容元模型（下）

    TOGAF架构内容框架之内容元模型(下) 2.2 治理扩展(Governance Extensions) 治理扩展元模型内容 治理扩展部分的意图在于引入额外的,并且与支持运营治理的目标和业务服务相关的 ...

  4. Yellow

    Yellow这首歌让我知道了yellow这个单词出了黄色的意思外,还有胆怯的,懦弱的意思~~~ 它是Coldplay 的歌曲,歌词很简单,但是有着莫名的忧伤感,值得一提的是这首歌的MV,一个长镜头给出 ...

  5. 【deep learning学习笔记】注释yusugomori的RBM代码 --- 头文件

    百度了半天yusugomori,也不知道他是谁.不过这位老兄写了deep learning的代码,包括RBM.逻辑回归.DBN.autoencoder等,实现语言包括c.c++.java.python ...

  6. OpenRisc-34-ORPSoC跑eCos实验

    引言 ORPSoC目前支持好几种OS,除了前面一直介绍的linux,还支持eCos,eCos是RTOS,如果你的系统对时间的要求比较高,那eCos会是一个不错的选择. 本小节就简单介绍一下,在ORPS ...

  7. Android 检测是否连接蓝牙耳机

    前言          欢迎大家我分享和推荐好用的代码段~~ 声明          欢迎转载,但请保留文章原始出处:          CSDN:http://www.csdn.net        ...

  8. 使用纯css代码实现div的“回”字型“叠放”效果

    正如大家所知道的那样,div是一个块级元素,也是网页编写过程中使用频率最高的一个元素,通过不同的样式控制可以实现一些最常见的页面效果,当然也可以实现一些比较复杂的页面效果,这里就展示一个本人面试过程中 ...

  9. Hexo+NextT基本设置【3】

    该系列博客列表请访问:http://www.cnblogs.com/penglei-it/category/934299.html 摘要      或许在你看到我这篇我文章之前,你已经成功的通过Git ...

  10. Altium Designer 快速修改板子形状为Keep-out layer大小

    Altium Designer 快速修改板子形状为Keep-out layer大小 1,切换到 Keep-out layer层, 2,选择层,快捷键为S+Y: 3,设计>>板子形状> ...