<!DOCTYPE HTML>
<html>

<head>
        <meta charset="utf-8">
        <meta name="description" content="描述">
        <meta name="keywords" content="关键字">
        <title>布局</title>
        <script src="js/jquery-1.9.1.min.js"></script>
        <style>
            #ul {
                height: 30px;
                margin-bottom: 10px;
            }
            #ul li {
                height: 30px;
                line-height: 30px;
                list-style: none;
                padding: 0 15px;
                border: 1px solid #dfdfdf;
                float: left;
                cursor: pointer;
            }
            #ul .current {
                background: #f4f4f4 repeat;
                height: 30px;
            }
            .content {
                width: 300px;
                height: 200px;
            }
            .content div {
                width: 300px;
                height: 200px;
                border: 1px solid #dfdfdf;
                display: none;
            }
            .content .show {
                display: block;
            }
        </style>
        <script>
            $(function() {
                $('#ul>li').click(function() {
                    $(this).addClass('current').siblings().removeClass('current');
                    //根据li索引值确定显示哪个DIV
                    $('.content>div').eq($(this).index()).show().siblings().hide();
                });
            })
        </script>
    </head>

<body>
        <ul id="ul">
            <li class="current">title1</li>
            <li>title2</li>
            <li>title3</li>
        </ul>
        <div class="content">
            <div class="show">content111。。。</div>
            <div>content222。。。</div>
            <div>content333。。。</div>
        </div>
    </body>

</html>

jquery实现选项卡（两句即可实现）的更多相关文章

  1. 对百度WebUploader开源上传控件的二次封装,精简前端代码(两句代码搞定上传)

    前言 首先声明一下,我这个是对WebUploader开源上传控件的二次封装,底层还是WebUploader实现的,只是为了更简洁的使用他而已. 下面先介绍一下WebUploader 简介: WebUp ...

  2. MySQL优化聊两句

    原文地址:http://www.cnblogs.com/verrion/p/mysql_optimised.html MySQL优化聊两句 MySQL不多介绍,今天聊两句该如何优化以及从哪些方面入手, ...

  3. 对百度WebUploader的二次封装,精简前端代码之图片预览上传(两句代码搞定上传)

    前言 本篇文章上一篇: 对百度WebUploader开源上传控件的二次封装,精简前端代码(两句代码搞定上传) 此篇是在上面的基础上扩展出来专门上传图片的控件封装. 首先我们看看效果: 正文 使用方式同 ...

  4. jquery插件的两种形式

    这里总结一下jquery插件的两种形式,一种是通过字面量的形式组织代码,另一种是通过构造函数的方式.下面就两种形式来分析俩个例子. 例子1: ;(function ($,window,document ...

  5. yii的入口文件index.php中为什么会有这两句

    yii的应用模板中,index.php中 前面会有这两句 <?php // comment out the following two lines when deployed to produc ...

  6. jQuery插件开发的两种方法及$.fn.extend的详解

    jQuery插件开发分为两种: 1 类级别 类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法. 开发扩展其方法时使用$.extend方法,即jQuery.ex ...

  7. 简单两句话解释下prototype和__proto__

    先上两句代码: var Person = function () {}; var p = new Person(); 把new的过程拆分成以下三步: <1> var p={}; 也就是说, ...

  8. jquery选择器中两个class是什么意思？

    jquery选择器中两个class是什么意思? $(".class1 .class2") 选择class1元素下class2的元素(中间有空格)$(".class1.cl ...

  9. jquery Tabs选项卡切换

    效果: HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

随机推荐

  1. INSTALL_FAILED_USER_RESTRICTED

    我这里出问的问题是在 清单文件中 <provider <mate_data 中少了   android:resource="@xml/filepaths" 加上就好 了

  2. flask + mysql写的简单监控系统

    这里以监控内存使用率为例,写的一个简单demo性程序,具体操作根据51reboot提供的教程写如下. 一.建库建表 创建falcon数据库: mysql> create database fal ...

  3. socket.io websocket

    不能不知道的事: 在Http协议中,客户端向服务器端发送请求,服务器端收到请求再进行回应,整个过程中,服务器端是被动方,客户端是主动方: websoket是H5的一种基于TCP的新通信协议,它与Htt ...

  4. iOS - 直播总结（理论到实践）

    一.直播原理及流程 1.一个完整直播app原理 直播原理:把主播录制的视频,推送到服务器,在由服务器分发给观众观看. 直播环节:推流端(采集.美颜处理.编码.推流).服务端处理(转码.录制.截图.鉴黄 ...

  5. 【Linux】使用 telnet 提示 Escape character is '^]'的意义

    在linux/unix下使用telnet hostname port连接上主机后会提示Escape character is '^]' 这个提示的意思是按Ctrl + ] 会呼出telnet的命令行, ...

  6. Qt获取CPU编号和硬盘序列号

    windows下执行命令除了用cmd之外,还有个东西叫WMIC,非常强大,可以通过他获取很多信息,包括硬件信息. QString frmMain::getWMIC(const QString & ...

  7. ELK系列六：Logstash的Filter模块

    Date过滤 input { stdin{ codec => plain } } filter { date { match => ["message", " ...

  8. 【读书笔记】socket函数

    socket函数 简介 应用程序调用socket函数来创建一个能够进行网络通信的套接字. 1 2 3 4 5 /* 头文件 */ #include <sys/types.h> #inclu ...

  9. 【BZOJ3456】城市规划 多项式求逆

    [BZOJ3456]城市规划 Description 刚刚解决完电力网络的问题, 阿狸又被领导的任务给难住了. 刚才说过, 阿狸的国家有n个城市, 现在国家需要在某些城市对之间建立一些贸易路线, 使得 ...

  10. 关于51单片机使用printf串口调试

    在51系列单片机上面使用串口的时候,有时候为了方便调试看一下输出结果,会用到printf函数输出到电脑终端,再用串口助手显示.但是单片机使用printf的时候有一点需要注意的地方. 1.首先添加头文件 ...