<!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. python学习笔记之迭代器和函数（第三天）

    一.collection系列: 1.counter计数器 如果counter(dict)是对字典的一个补充,如果counter(list)则是对列表的补充,初步测试对字典的值进行排序. ####### ...

  2. 上海有线通下载exe会302转发请求

    起因: 做的软件用的clickonce,在公网的clickonce下载exe时一直报错,在vpn环境下没问题.错误提示如下: + HTTP redirect is not allowed for ap ...

  3. Java数据结构之回溯算法的递归应用迷宫的路径问题

    一.简介 回溯法的基本思想是:对一个包括有很多结点,每个结点有若干个搜索分支的问题,把原问题分解为对若干个子问题求解的算法.当搜索到某个结点.发现无法再继续搜索下去时,就让搜索过程回溯(即退回)到该结 ...

  4. Java注解和代理实现

    1.定义注解 import java.lang.annotation.Documented; import java.lang.annotation.ElementType; import java. ...

  5. http协议梳理（个人学习用）

    HTTP默认的端口号为80,HTTPS的端口号为443. 在Internet中所有的传输都是通过TCP/IP进行的.HTTP协议作为TCP/IP模型中应用层的协议.HTTP协议通常承载于TCP协议之上 ...

  6. lua 和 c/c++ 交互 （持续更新）

    参考: http://blog.csdn.net/xiaohuh421/article/details/7476485 http://blog.csdn.net/shun_fzll/article/d ...

  7. Android.mk 文件语法详解

    0. Android.mk简介: Android.mk文件用来告知NDK Build 系统关于Source的信息. Android.mk将是GNU Makefile的一部分,且将被Build Syst ...

  8. centos 6.6中的yum源更换成国内的阿里云yum源

    阿里云Linux安装镜像源地址:http://mirrors.aliyun.com/ 第一步:备份你的原镜像文件,以免出错后可以恢复. mv /etc/yum.repos.d/CentOS-Base. ...

  9. 23-React Render Element

    第23节 React Render Element 1.Element 元素是反应应用程序的最小积木. 元素描述你在屏幕上看到的内容.: const element= <h1>你好,世界& ...

  10. org.eclipse.swt.custom.StyledText.getScrollbarsMode()I

    错误: org.eclipse.swt.custom.StyledText.getScrollbarsMode()I 解决方法: 1 卸载,并手工清除myeclipse全部文件 2 重新安装myecl ...