<!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. linux下c语言获取当前时间

    和时间有关的函数定义在头文件”time.h”中 常用函数: time_t time(time_t *t); 函数说明:此函数会返回从公元 1970 年1 月1 日的UTC 时间从0 时0 分0 秒算起 ...

  2. 手机CPU

    说起手机CPU的历史,笔者给大家提一个问题:"世界上第一款智能手机是什么呢?"相信很多人的答案是爱立信的R380或诺基亚的7650,但都不对,真正的首款智能手机是由摩托罗拉在200 ...

  3. 深入浅出MFC——MFC六大关键技术仿真（二）

    1. 仿真MFC目的:以MFC为例,学习application framework的内部运行.MFC六大关键技术: (1)MFC程序的初始化过程 (2)RTTI(Runtime Type Inform ...

  4. 在javaweb的项目当中实现随机数字的生成

    首先,需要在javaweb的项目当中新建一个Servlet文件,然后再web.xml中配置一下: 这样运行的时候就可以通过“http://localhost:8080/Response/Respons ...

  5. iOS使用TFHpple解析html

    iOS 开发中解析html 网上有很多写好的解析框架 今天就来讲一下如何用框架TFHpple来解析html 使用TFHpple解析html github地址:https://github.com/to ...

  6. Web程序员应该知道的Javascript prototype原理

    有同事问了我几个和Javascript的类继承的小问题,我在也不太理解的情况下,胡诌了一通. 回来以后有些内疚, 反省一下, 整理整理Javascript的prototype的原理, 自己清楚点, 也 ...

  7. 一种新型聚类算法(Clustering by fast search and find of density peaksd)

    最近在学习论文的时候发现了在science上发表的关于新型的基于密度的聚类算法 Kmean算法有很多不足的地方,比如k值的确定,初始结点选择,而且还不能检测费球面类别的数据分布,对于第二个问题,提出了 ...

  8. 原生js--类、原型、构造函数

    1.类和原型:原型对象是类的核心,类的所有实例都从同一个原型上继承属性和方法,原型对象是类的唯一标识 2.类和构造函数:构造函数通过new关键字来创建对象,构造函数的prototype属性被用作新对象 ...

  9. Python Tkinter Entry(文本框)

    Python学习记录--关于Tkinter Entry(文本框)的选项.方法说明,以及一些示例. 属性(Options) background(bg) borderwidth(bd) cursor e ...

  10. Android 4.0的图形硬件加速及绘制技巧

    转:http://zuiniuwang.blog.51cto.com/3709988/721798 从Android 3.0开始,Android 2D的绘制流程就设计为能够更好地支持硬件加速.使用GP ...