该文件引用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. pipe----管道----fork

    #include <stdio.h> #include <unistd.h> #include <stdlib.h> #include <string.h&g ...

  2. android 轮播图

    轮播图是很常用的一个效果 核心功能已经实现 没有什么特殊需求 自己没事研究的 所以封装的不太好 一些地方还比较糙 为想要研究轮播图的同学提供个参考 目前测试图片为mipmap中的图片 没有写从网络加载 ...

  3. 【Backbone】 Backbone初探

    前言 在此之前研究了一段React,但是不得不承认React.Vue等MVVM框架相对于原有的Jquery来说,简直是翻天覆地的不同.它们之间的差异不仅仅体现在框架思维的不同,而是ES5到ES6的编程 ...

  4. USACO 4.1 Fence Loops（Floyd求最小环）

    Fence Loops The fences that surround Farmer Brown's collection of pastures have gotten out of contro ...

  5. SwiftyUserDefaults-封装系统本地化的框架

    // // ViewController.swift // Test4SwiftyUserDefaults // // Created by 马玉龙 on 2017/1/14. // Copyrigh ...

  6. Ubuntu16 64位安装steam， 并解决无法启动的问题

    直接用crtl+shift打开终端,运行下面的命令. sudo add-apt-repository multiverse sudo apt update sudo apt install steam ...

  7. 剑指offer ------ 刷题总结

    面试题3 -- 搜索二维矩阵 写出一个高效的算法来搜索 m × n矩阵中的值. 这个矩阵具有以下特性: 1. 每行中的整数从左到右是排序的. 2. 每行的第一个数大于上一行的最后一个整数. publi ...

  8. C++ 处理 utf-8

    类似"abc汉字"这样的字符串是以utf-8编码; C++ 的 cout执行的操作是把参数发送给stdout,因此如果终端支持utf-8, 汉字可以使用cout打印: 比较好的办法 ...

  9. nginx服务器上遇到了acces denied,报错是fastCGI只要好好修改配置就行了

    猜想: 懵逼 实践: 首先通用的方法,并没有解决问题. 1.修改php-fpm配置文件vim /etc/php-fpm.d/www.confuser = nginx        编辑用户为nginx ...

  10. 64位win7系统中vb工程显示加载MSCOMCTL.OCX失败

    MSCOMCTL.OCX明明已经注册成功,但还是提示加载失败,对象未注册 尝试过的方法:system32中注册,syswow64中注册,vb打sp6补丁, 修改工程文件:用记事本打开VBP文件找到这一 ...