简单的Tab效果

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>选项卡</title>

        <style type="text/css">

        *{

            margin: 0;

            padding: 0;

        }

            #box{

                margin: 50px auto;

                width: 600px;

                height: 500px;

            }

            ul li{

                width: 200px;

                height: 50px;

                float: left;

                list-style: none;

            }

            #box div{

                width: 600px;

                height: 450px;

                display: none;

            }

            .li1{

                background: blue;

            }

            .li2{

                background: gold;

            }

            .li3{

                background: pink;

            }

            .div1{

                background: blue;

            }

            .div2{

                background: gold;

            }

            .div3{

                background: pink;

            }

        </style>

        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

        <script type="text/javascript">

            $(function(){

                //加载后让第一个div先显示出来

                $('#box div').eq(0).css('display','block')

                $('#box ul li').mouseover(function(){

                    //将当前移上li的下标对应的div显示，同时将不是ul的同级元素（div）隐藏

                    $('#box div').eq($(this).index()).css('display','block').siblings().not('ul').css('display','none')

                })

            })

        </script>

    </head>

    <body>

        <div id="box">

            <ul>

                <li class="li1"></li>

                <li class="li2"></li>

                <li class="li3"></li>

            </ul>

            <div class="div1"></div>

            <div class="div2"></div>

            <div class="div3"></div>

        </div>

    </body>

</html>

jQery简单Tab选项卡效果的更多相关文章

  1. CSS3及JS简单实现选项卡效果（适配手机端和pc端）

    想要适配手机端和pc端,有几种简单的方法,本人使用的是百分比分配的方法. *{ padding: 0; margin: 0; } body,html{ width: 100%; height: 100 ...

  2. jquery简单实现tab选项卡效果

    html: <ul class="tab"> <li>最新</li> <li class="cur">热门< ...

  3. jQuery实现tab选项卡效果小demo

    html页面: <section> <h2>Section Title</h2> <ul class="tab-nav"> < ...

  4. 微信小程序的wx-charts插件-tab选项卡

    微信小程序的wx-charts插件-tab选项卡 效果: //index.js var wxCharts = require('../../utils/wxcharts-min.js'); const ...

  5. 面向对象的tab选项卡实现

    利用最基础的面向对象的思想,实现tab选项卡效果: 效果截图:

  6. 微信小程序实例：实现tabs选项卡效果

    最近微信应用号是炒的如火如荼,热门满满,但是也可以发现搜索关键词出来,各类网站出现的还都是微信的官方文档解释.正好赶上这个热潮,这几天先把小程序技术文档看了个遍,就直接着手写案例了.很多组件微信内部已 ...

  7. jquery 选项卡切换、选项卡封装、简单的jquery选项卡封装、tab切换效果

    相信选项卡切换是大家常用的效果单独写一个选项卡切换很方便但是要是一个页面出现多个选项卡不做封装的话会显得代码很杂乱 <div class="bodyCenter"> & ...

  8. 基于CkEditor实现.net在线开发之路（4）快速布局，工具箱，模板载入，tab选项卡简单说明与使用

    上一章给常用的from表单控件属性页面,进行了简单说明和介绍,但是由于是在网页中做界面设计,操作肯定没有桌面应用程序方便,便捷,为了更方便的布局与设计,今天我主要说一下快速布局,工具箱,tab选项卡, ...

  9. jquery写的tab切换效果 非常简单

    自己写的一款 tab切换效果,比较简单,适合新手 <style type="text/css">*{margin:0; padding:0; font-size:12p ...

随机推荐

  1. C++11散列表

    [C++11散列表] 散列表对应于C++03中的hash_xxx,分为set和map两种 上述的类型将满足对一个容器类型的要求,同时也提供访问其中元素的成员函数: insert, erase, beg ...

  2. C++11之使用或禁用对象的默认函数

    [C++11之使用或禁用对象的默认函数] C++11 允许显式地表明采用或拒用编译器提供的内置函数.例如要求类型带有默认构造函数,可以用以下的语法: 另一方面,也可以禁止编译器自动产生某些函数.如下面 ...

  3. 最精简的IOCP封装

    最精简的IOCP封装,DELPHI XE8直接编译通过.Winsock2.pas即使用DELPHI自带的,相信XE7也能编译,或者XE6,XE5也能. 单说Winsock2.pas,我见过无数种版本的 ...

  4. 了解 JavaScript 中的内置对象

    所有编程语言都具有内部(或内置的)对象来创建 语言的基本功能.内部对象是 您编写自定义代码所用语言的基础, 该代码基于您的想象实现自定义功能.JavaScript 有许多 将其定义为语言的内部对象.本 ...

  5. POJ1463 Strategic game (最小点覆盖 or 树dp)

    题目链接:http://poj.org/problem?id=1463 给你一棵树形图,问最少多少个点覆盖所有的边. 可以用树形dp做,任选一点,自底向上回溯更新. dp[i][0] 表示不选i点 覆 ...

  6. ASP.NET|跳转（redirect）到其它站点，提示：当前线程终止。

    在XAF中,如果使用HttpContext.Response.Redirect()进行跳转,会出现”当前线程终止“的报错,跳转失败. 这时候,应该改用WebApplication.Redirect() ...

  7. 为什么iphone手机比android手机流畅

    作为当下最流行.市场占用份额最大的两大手机操作系统IOS和android,目前两者加起来的市场占用率达到90%.我曾经一直用android手机,没有用过iphone,那时候正直iphone4和ipho ...

  8. SB集中营

    我犯了一个超级低质的错误,是关于结构体内部变量的以 . 或者 –> 调用的问题. 当时的考虑是,如果结构体内变量是指针用  ->,其他用 .  . 呵呵了. 难道是因为两天没休息好吗?还是 ...

  9. asp.net架构基础知识--页面以及全局事件

    1.asp.net的请求过程,以及对应的处理请求的dll客户的请求页面由aspnet_isapi.dll这个动态连接库来处理,把请求的aspx文件发送给CLR进行编译执行,然后把Html流返回给浏览器 ...

  10. C#将html导出到word（基于wps）

    由于客户需要,我们需要实现将网页导出到word中的功能,在此过程中,尝试使用过openoffice.itext.wordapi等各种方法,都不尽如人意.openoffice导出的问题图片信息在word ...