该文件引用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. 深入浅出 ThreadLocal（一）

    本文参考http://lavasoft.blog.51cto.com/62575/51926/,对其中的程序进行了改写 一.概述 ThreadLocal是什么呢?其实ThreadLocal并非是一个线 ...

  2. Yellow

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

  3. memcache研究

    memcache研究 最近开发了一个数据库,该数据库是利用共享内存做的,测试了下增删改查的性能,想与memcached数据库做个对比,故研究下memcached. 那什么是memcached? mem ...

  4. php文件上传及头像预览

    php文件上传原理是通过form表单的enctype="multipart/form-data"属性将文件临时放到wamp文件夹中的tmp目录下,再通过后台php 程序将文件保存在 ...

  5. PHP里文件的查找方式及写法

    PHP里说的文件包括:文件和目录1.用filetype方法加路径("./11.txt")是判断文件类型 //var_dump(filetype("./11.txt&quo ...

  6. linux上安装mysql及简单的使用

    1. 安装mysql sudo apt-get update sudo apt-get install mysql-server sudo apt-get install python-mysqldb ...

  7. 运行ORB-SLAM笔记_使用篇（二）

    1. 编译完成之后就可以使用了,按照说明我们可以知道,首先开启roscore

  8. PSR

    目前包括以下几个规范: PSR-0(弃用) PSR-1 PSR-2 PSR-3 PSR-4 1.PSR-0 自动加载规范,此规范已被启用-本规范已于2014年10月21日被标记为弃用,目前新的替代规范 ...

  9. 第11章：DOM扩展

  10. redis面试总结

    http://blog.csdn.net/guchuanyun111/article/category/6335900 (1)什么是redis? Redis 是一个基于内存的高性能key-value数 ...