您当前的位置:主页 > 教程合集 > Html/css网站首页Html/css

利用jQuery实现简单的tab选项卡切换效果

发布时间:2017-07-03编辑:余斗阅读:(0)字号:
    大部分的网站上都会应用到Tab选项卡的切换效果,一来特效很酷,二来能节省不少网页占位,颇受到家喜爱。而Tab选项卡无论用CSS3还是JS都可以实现。今天余斗就给大家分享一个利用jQuery实现简单的tab选项卡切换效果代码,大家可以根据分享的代码自行扩展使用。 代码如下:

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.2/jquery.min.js"></script>
    <title>简单的tab效果</title>
    <style type="text/css">
    * {
        padding: 0px;
        margin:0px
    }
    body {
        text-align: center
    }
    .wrap ul {
        overflow: hidden
    }
    .wrap li {
        float: left;
        list-style: none;
        margin-right: 10px;
        cursor: pointer;
        padding: 2px 5px
    }
    .link {
        cursor: pointer;
        color: #F00
    }
    .wrap {
        width: 200px;
        margin: 50px auto
    }
    .wrap, .ellipsis {
        font-size: 12px;
        width: 200px;
    }
    .tab_div div {
        display: none;
        padding: 10px;
    }
    .tab_div {
        text-align: left;
        border: 1px #CCC solid;
        height: 200px;
        clear: both
    }
    .cur {
        background: #060;
        color: #FFF
    }
    #setTab_2{
        margin-top: 20px;
    }
    </style>
    <script type="text/javascript">
    $(document).ready(function() {
        //tab
            $("#setTab").setTab();
            $("#setTab_2").setTab();
    });
       
    /*插件代码*/
    (function ($) {
        $.fn.setTab = function () {
            var getTab=$(this),//this指向调用函数的ID
                panels = getTab.children("div.tab_div").children("div"),
                tabs = getTab.find("li");
       
            return this.each(function(){
                $(tabs).click(function(e) {
                    var index = $.inArray(this, $(this).parent().find("li"));//this指向li
                    if (panels.eq(index)[0]) {
                        $(tabs).removeClass("cur");
                        $(this).addClass("cur");
                        panels.css("display", "none").eq(index).css("display", "block");
                    }
                });
                   
            });
      }
    })(jQuery);
       
       
    </script>
    </head>
    <body class="wrap">
    <div id="setTab">
      <ul class="tab_nav">
        <li class="cur">国事</li>
        <li>军情</li>
        <li>图片</li>
      </ul>
      <div class="tab_div">
        <div style="display: block">国事</div>
        <div>军情</div>
        <div>图片</div>
      </div>
    </div>
    <div id="setTab_2">
      <ul class="tab_nav">
        <li>国事</li>
        <li class="cur">军情</li>
        <li>图片</li>
      </ul>
      <div class="tab_div">
        <div>国事</div>
        <div style="display: block">军情</div>
        <div>图片</div>
      </div>
    </div>
    </body>
    </html>
     
    效果: 利用jQuery实现简单的tab选项卡切换效果
关键字词jQuerytab
余斗余斗
  1. 转载请注明:利用jQuery实现简单的tab选项卡切换效果
  2. 版权声明:本站原创文章,由发表在Html/css分类下,于2017-07-03最后更新
CSS3之常用浮出层的写法示例
鼠标放在span元素上指针变小手的实现方法
手机扫一扫 随身带着看
鸿运国际手机登录首页