一个页面多个Tap切换的使用 

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            .tabs-nav li {
                float: left;
                cursor: pointer;
            }
            
            .tabs {
                width: 80.9%;
                height: auto;
                overflow: hidden;
            }
            
            .tabs-nav {
                width: 100%;
                height: auto;
                overflow: hidden;
                display: flex;
                justify-content: space-around;
            }
            
            .tabs-contents {
                width: 100%;
                height: auto;
                overflow: hidden;
            }
            
            .tabs-nav li.active {
                color: #9d0e0e;
                border-bottom: 1px solid #9D0E0E;
            }
        </style>
    </head>

    <body>
        <div class="tabs" data-vendor="tabs">
            <ul class="tabs-nav">
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
            <div class="tabs-contents">内容1</div>
            <div class="tabs-contents">内容二</div>
            <div class="tabs-contents">
                <div class="tabs" data-vendor="tabs">
                    <ul class="tabs-nav">
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                    </ul>
                    <div class="tabs-contents">内容1</div>
                    <div class="tabs-contents">内容二</div>
                    <div class="tabs-contents">内容三</div>
                </div>
            </div>
        </div>
        <div class="tabs" data-vendor="tabs">
            <ul class="tabs-nav">
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
            <div class="tabs-contents">内容1</div>
            <div class="tabs-contents">内容二</div>
            <div class="tabs-contents">内容三</div>
        </div>
    </body>
    <script type="text/javascript">
        (function($) {
            var name = 'myTabs';

            // 选项卡
            var AppTabs = function(element, options) {
                // 参数继承
                this.options = $.extend(true, {}, AppTabs.DEFAULTS, options);

                // 对象
                this.$this = $(element);
                this.$nav = $(element).children('.tabs-nav');
                this.$navItems = this.$nav.children('li');
                this.$contents = $(element).children('.tabs-contents');

                // 初始化
                this.init();
            };

            // 实现方法
            AppTabs.prototype = {
                // 初始化
                init: function() {
                    // 当前高亮 - 默认，获取 .active 的 index 值，否则第一个高亮
                    var $activeNav = this.$nav.children('li.active:first');
                    this.nowInt = $activeNav[0] ? $activeNav.index() : parseInt(this.options.startInt);
                    this.flip(this.nowInt);

                    // 事件绑定
                    $.each(this.$navItems, $.proxy(function(i, item) {
                        $(item).on('click.' + name, $.proxy(this, 'flip', i));
                    }, this));

                },

                // 切换
                flip: function(index) {
                    // 标签切换
                    this.$navItems.removeClass('active')
                        .eq(index)
                        .addClass('active');

                    // 内容切换
                    this.$contents.hide()
                        .eq(index)
                        .show();
                }
            };

            // 暴露参数
            AppTabs.DEFAULTS = {
                startInt: 0
            };

            // jQuery 调用
            $.fn.appTabs = function(options) {
                var isMethod = (typeof options === 'string') ? true : false;
                return this.each(function() {
                    var $this = $(this),
                        data = $.data(this, name);
                    if(!data || options) {
                        $.data(this, name, new AppTabs(this, isMethod ? {} : options));
                        data = $.data(this, name);
                    }
                    if(isMethod) {
                        data.call(options, args);
                    }
                });
            };

            // 自动调用
            $(window).on('load.app.' + name, function() {
                $('[data-vendor="tabs"]').appTabs();
            });

        })(jQuery);
    </script>

</html>

 

posted @ 2020-03-23 16:13  YH丶浩  阅读(1285)  评论(0)    收藏  举报