成都知之科技有限公司

知之互动专注成都\南充\乐山\绵阳\贵阳\兰州等地的品牌网站建设,是西南最具专业实力的网站建设网络公司。给成都众多知名企业提供过高品质的网站建设、移动手机网站设计、门户社区与电子商务B2C网站与运营、微信应用与医疗网站建设、百度推广托管(竞价、网盟帐户托管)与运营及营销推广等服务,赠送域名空间邮箱,做网站请致电18200120015.

jQuery ztabs选项卡插件zhiz.net

更新:2013-10-03 15:10来源:成都知之科技点击:

head部分内容:

<script src="../js/jquery.min.js"></script>

<script src="../js/jquery.ztabs.js"></script>

jquery.ztabs.js文件内容如下:

<script type="text/javascript">

        (function ($) {

            $.fn.ztabs = function () {

                var s = {};

                for (var i = 0; i < arguments.length; ++i) {

                    var a = arguments[i];

                    switch (a.constructor) {

                        case Object: $.extend(s, a);

                            break;

                        case Boolean: s.change = a;

                            break;

                        case Number: s.start = a;

                            break;

                        case Function: s.click = a;

                            break;

                        case String: if (a.charAt(0) == '.') s.selected = a;

                        else if (a.charAt(0) == '!') s.event = a;

                        else if (a.charAt(0) == '*') s.event = a;

                        else s.start = a;

                            break;

                    }

                }

                if (typeof s['return'] == "function")

                    s.change = s['return'];

                return this.each(function () {

                    $.ztabs(this, s);

                });

            }

            $.ztabs = function (tabs, options) {

                var meta = ($.metadata) ? $(tabs).metadata() : {};

                var s = $.extend({}, $.ztabs.settings, meta, options);

                if (s.selected.charAt(0) == '.') s.selected = s.selected.substr(1);

                if (s.event.charAt(0) == '!') s.event = s.event.substr(1);

                if (s.start == null) s.start = -1;

 

                var showId = function () {

                    if ($(this).is('.' + s.selected))

                        return s.change;

                    var id = "#" + $(this).attr("data-tab").split('#')[1];

 

                    var aList = [];

                    var idList = [];

 

                    $("li[data-tab*='#']", tabs).each(function () {

                        if ($(this).attr("data-tab").match(/#/)) {

                            aList.push(this);

                            idList.push("#" + $(this).attr("data-tab").split('#')[1]);

                        }

                    });

                    if (s.click && !s.click.apply(this, [id, idList, tabs, s])) return s.change;

                    for (i in aList) $(aList[i]).removeClass(s.selected);

                    for (i in idList) $(idList[i]).hide();

                    $(this).addClass(s.selected);

                    $(id).show();

                    return s.change;

                }

                var list = $("li[data-tab*='#']", tabs).unbind(s.event, showId).bind(s.event, showId);

                list.each(function () {

                    $("#" + $(this).attr("data-tab").split('#')[1]).hide();

                });

                var test = false;

                if ((test = list.filter('.' + s.selected)).length);

                else if (typeof s.start == "number" && (test = list.eq(s.start)).length);

                else if (typeof s.start == "string" && (test = list.filter("[data-tab*='#" + s.start + "']")).length);

                if (test) {

                    test.removeClass(s.selected);

                    test.trigger(s.event);

                }

                return s;

            }

            $.ztabs.settings = {

                start: 0, change: false, click: null, selected: ".selected", event: "!click"

            };

        })(jQuery);

    </script>

 

body部分内容:

    <div class="tabs">

        <ul>

            <li data-tab="#litabs-1"><a href="http://www.zhiz.net">选项一</a></li>

            <li data-tab="#litabs-2"><a href="#">选项二</a></li>

            <li data-tab="#litabs-3" class="selected"><a href="#">选项三</a></li>

        </ul>

        <div id="litabs-1">

            选项一AAAAAAAAA

        </div>

        <div id="litabs-2">

            选项二BBBBBBBBBB

        </div>

        <div id="litabs-3">

            选项三-CCCCCCCCCC

        </div>

    </div>

    <script type="text/javascript">

        $(".tabs").ztabs("!mouseover");

    </script>

 

自动识别网站平台并跳转手机站
jQuery操作Cookie插件
© 2014 www.zhiz.net All Rights Reserved. 知之科技 蜀ICP备11006209号