<!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. 在eclipse上开发nodejs

    首先到官网下载nodejs.地址:https://nodejs.org/en,可根据自己的操作系统选择下载. 安装好后.进入命令行输入node ,然后输入console.log("hello ...

  2. 接口测试第十二课（fidller过滤）(转)

    转自: 经常有人问我,如何只抓手机上某个应用的请求包?在使用fiddler抓手机包的过程中,fiddler会话框上瞬间就满屏了,因为它不仅抓到手机上的请求数据包,也抓到了PC端的网络请求包.这时候很难 ...

  3. CodeSmith 介绍

    代码生成器作用 中国有句古语叫做“工欲善其事,必先利其器”,用通俗的话来说就是“磨刀不误砍柴功”,古人的这些话告诉我们:要把事情做好,事先应该准备合适的工具.工具不仅仅包括器具, 还包括思想.理论.经 ...

  4. （Interface）接口特点

    接口是一种规范.只要一个类继承了一个接口,这个类就必须实现这个接口中所有的成员 为了多态. 接口不能被实例化.也就是说,接口不能new(不能创建对象) 接口中的成员不能加"访问修饰符&quo ...

  5. ubuntu执行sudo apt-get update提示缺少公钥

    提示信息如下: 获取:1 http://archive.ubuntukylin.com:10006/ubuntukylin xenial InRelease [3,192 B] 命中:2 http:/ ...

  6. java htmlunit 抓取网页数据

    WebClient webClient=new WebClient(BrowserVersion.CHROME); webClient.setJavaScriptTimeout(5000); webC ...

  7. FFmpeg相关资料

    编译: http://www.jianshu.com/p/147c03553e63 http://www.cocoachina.com/ios/20150514/11827.html http://c ...

  8. 30分钟学会反向Ajax

    场景1:当有新邮件的时候,网页自动弹出提示信息而无需用户手动的刷新收件箱. 场景2:当用户的手机扫描完成页面中的二维码以后,页面会自动跳转. 场景3:在类似聊天室的环境中有任何人发言,所有登录用户都可 ...

  9. kafka0.9.0及0.10.0配置属性

    问题导读1.borker包含哪些属性?2.Producer包含哪些属性?3.Consumer如何配置?borker(0.9.0及0.10.0)配置Kafka日志本身是由多个日志段组成(log segm ...

  10. C#:时间转换

    1.C#时间转js时间 /// <summary> /// C#时间转js时间 /// </summary> /// <param name="theDate& ...