简单的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. django 命名空间详解

    include(module[, namespace=None, app_name=None ]) include(pattern_list) include((pattern_list, app_n ...

  2. win7 文件共享 xp

    前几天因为需要将win7内一文件夹共享给XP使用,因为NT5跟NT6安全机制的问题,共享的实现没有XP共享的方便,很多人是牺牲(关闭)了win7的系统防火墙才达到共享给XP的目的,但是关闭防火墙势必会 ...

  3. MSSQL手札二 MSSQL的触发器

    触发器,就是在对表做DML操作的时候,触发一些其他的事件,触发器一般用在check约束更加复杂的约束上面,是一种特殊的存储过程,不可以被主动调用. 语法如下: CREATE TRIGGER trigg ...

  4. 【PAT】1020. Tree Traversals (25)

    Suppose that all the keys in a binary tree are distinct positive integers. Given the postorder and i ...

  5. .net 下的MVCPager

    http://www.cnblogs.com/jiagoushi/archive/2012/12/16/2820835.html http://blog.itpub.net/9914816/views ...

  6. Decode放在where条件后的新用法

    今天遇到一种特殊情况的查询,在查询某表时,要通过判断其中一个字段的值再用其他字段作为条件查询,比如有3个字段 columnA,columnBm,columnC,columnA的值由两个——分别是0和1 ...

  7. C#委托的介绍(delegate、Action、Func、predicate)（转）

    委托是一个类,它定义了方法的类型,使得可以将方法当作另一个方法的参数来进行传递.事件是一种特殊的委托. 1.委托的声明 (1). delegate delegate我们常用到的一种声明   Deleg ...

  8. 二进制程序分析工具Pin在Windows系统中的安装和使用方法

    这篇日志其实很弱智,也是因为换了新电脑,实验环境不全(当然,做这个实验我是在虚拟机里,因为接下来想拿些恶意代码的数据),所以这里记录一下在Windows下怎么安装和使用Pin这个程序分析领域最常用的工 ...

  9. TT付款方式、前TT和后TT、LC信用证+TT付款方式

    TT付款方式是以外汇现金方式结算,由您的客户将款项汇至贵公司指定的外汇银行账号内,可以要求货到后一定期限内汇款. .T/T属于商业信用,也就是说付款的最终决定权在于客户.T/T分预付,即期和远期.现在 ...

  10. 【转】Android图片加载神器之Fresco-加载图片基础[详细图解Fresco的使用]

    Fresco简单的使用—SimpleDraweeView 百学须先立志—学前须知: 在我们平时加载图片(不管是下载还是加载本地图片…..)的时候,我们经常会遇到这样一个需求,那就是当图片正在加载时应该 ...