<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab</title>
    <style>
        *{margin:0;padding: 0}
        ul,li{list-style: none;}
        .active{
                background: gray;
                display: block;
        }
        .hide{display: none;}
        ul{
            overflow: hidden;
        }
        ul li{
            width:50px;
            height: 50px;
            float: left;
            border-radius: 3px;
            text-align: center;
            line-height: 50px;
        }
        .dis{display:block;}
        .dis1{display:none;}
    </style>
    <script src="jquery-1.8.3.min.js"></script>
</head>
<body>
    <div class="container">
        <ul class="tabs">
            <li class="active">on</li>
            <li id="off">off</li>
        </ul>
            <div id="tab1" class="dis">2111111111111111111111111</div>
    </div>
    <script>
        $(document).ready(function(){
            
            $(".tabs li").click(function(){
                $(".tabs li").removeClass("active");
                $(this).addClass("active");
                if($("#tab1").hasClass("dis")){
                    $("#tab1").removeClass("dis");
                    $("#tab1").addClass("dis1");
                }
                else
                {
                    $("#tab1").removeClass("dis1");
                    $("#tab1").addClass("dis");
                }
            });
        })
    </script>
</body>
</html>

jquery实现on/off开关按钮的更多相关文章

  1. 巧妙利用jQuery和PHP打造类似360安全卫士防火墙功能开关(类似iphone界面)效果

    安全卫士防火墙开启关闭的开关,可以将此功能应用在产品功能的开启和关闭功能上. 准备工作为了更好的演示本例,我们需要一个数据表,记录需要的功能说明及开启状态,表结构如下: CREATE TABLE `p ...

  2. 基于Bootstrap的jQuery开关按钮插件

        按钮 下载 使用方法 首先要在页面中引入依赖文件: jquery.Bootstrap.Bootstrap Switch CSS和Bootstrap Switch JS.这里用的是bootstr ...

  3. 基于Bootstrap的超酷jQuery开关按钮插件

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJgAAAA2CAIAAAC0tsfoAAAB/0lEQVR4nO3bQWrCQBTGcc/mbVz0DD

  4. 基于Bootstrap的jQuery开关按钮组合

    Bootstrap是一款由Twitter推出的开源前端开发包,功能非常强大.今天我们要分享的这款jQuery开关按钮组合就是基于Bootstrap框架的,看了按钮的主题样式,也都是Bootstrap的 ...

  5. 【转】基于Bootstrap的超酷jQuery开关按钮插件

    基于Bootstrap的超酷jQuery开关按钮插件

  6. 使用jQuery实现类似开关按钮的效果

    转自:http://www.cnblogs.com/linjiqin/p/3148228.html 本案例实现类似开关按钮效果. 页面有下拉列表.文本框.按钮等表单元素,大致实现如下效果:1.页面一加 ...

  7. jQuery滑动开关按钮效果

    效果图: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  8. light7结合jquery实现开关按钮

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  9. jquery开关按钮效果

    .circular1{ width: 50px; height: 30px; border-radius: 16px; background-color: #ccc; transition: .3s; ...

随机推荐

  1. npm 安装远程包（github的）

    npm install git+ssh://git@github.com:xxx/xxx.git#master --save-dev npm install git+ssh://git@github. ...

  2. 修改tnsnames.ora文件中配置内容中的连接别名后，连接超时解决办法

    1.tnsnames.ora文件中配置内容中的连接别名:由upaydb修改为IP地址 2.连接超时 定位原因: PLSQL登录界面的数据库列表就是读的tnsname.ora中连接的别名,这个文件中连接 ...

  3. svn更新路径，解决办法详细步骤，eclipse里面的更新方法，svn废弃位置，Windows环境，svn服务器地址换了，如何更新本地工作目录

    svn更新路径,解决办法详细步骤,eclipse里面的更新方法,svn废弃位置,Windows环境,svn服务器地址换了,如何更新本地工作目录 Windows下,svn服务器IP本来是内网一台服务器上 ...

  4. Mac OS下基于Eclipse的Android调试环境搭建

    1.安装Eclipse:http://www.eclipse.org/downloads/,网页会自动检测适用的版本(Mac OS x64),下载“Eclipse IDE for java Devel ...

  5. git 远程库命令

    git 常用命令在这里就不在说了,初学者点击http://www.cnblogs.com/Vdiao/p/5267250.html Git是分布式版本控制系统,同一个Git仓库,可以分布到不同的机器上 ...

  6. treeview所有节点递归解法（转+说明）或者说递归的实际应用

    public void PrintTreeViewNode(TreeNodeCollection node) { foreach (TreeNode n in node) { Response.Wri ...

  7. mysql中正则表达式的使用

    mysql中正则表达式的性能要高于like,所以这里总结一下正则表达式的使用. 正则表达式的模式及其含义: 下面举例说明其用法: 建表student: create table student(id ...

  8. 为现有图像处理程序添加读写exif的功能

    为现有图像处理程序添加读取exif的功能 exif是图片的重要参数,在使用过程中很关键的一点是exif的数据能够和图片一起存在.exif的相关功能在操作系统中就集成了,在csharp中也似乎有了实现. ...

  9. libevent源码分析：listener

    listener是libevent封装的一个方便生成监听者的一组结构和函数,其中包括: /* * Copyright (c) 2000-2007 Niels Provos <provos@cit ...

  10. mysql replace

    replace(object, search,replace) 示例:update table set col1 = replace(col1, 'a', 'A'); 将col1字段中的小写a替换成大 ...