封装tap小插件

最新推荐文章于 2021-06-04 02:09:30 发布

娄笙悦

最新推荐文章于 2021-06-04 02:09:30 发布

阅读量629

点赞数 1

分类专栏：插件开发文章标签： tap tap插件封装插件函数

本文链接：https://blog.csdn.net/weixin_41424247/article/details/78826539

版权

插件开发专栏收录该内容

9 篇文章 0 订阅

订阅专栏

如果你看不明白以下代码，我建议你先看看js自调用匿名函数与内部实例化封装插件

;(function (win, $) {
    //handle
})(window, jQuery);

废话少说，直接上码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>tap小插件</title></head>
<style>
    * {  margin: 0;  padding: 0;  }
    a {  text-decoration: none;  color: #cccccc;  }

    .container {  width: 1200px;  overflow: hidden;  margin:0 auto;  }
    .tap-list{  text-align: center;  background-color: antiquewhite;  }
    .tap-list li {  display: inline-block;  line-height:50px;  margin:0 20px;  padding:0 15px;  }
    .tap-list li.on{  background-color: #cccccc;  }
    .tap-list li.on a{  color: #000;  }
    .tap-item .item{  min-height: 200px;  border: 1px solid gray;  padding: 20px 15px;  overflow: hidden;  margin: 30px 0;  display: none;  }
    .tap-item .item.show{  display: block;  }
</style>
<body>

<ol class="tap-list container" id="tapList">
    <li class="on"><a href="javascript:;">show item1</a></li>
    <li><a href="javascript:;">show item2</a></li>
    <li><a href="javascript:;">show item3</a></li>
    <li><a href="javascript:;">show item4</a></li>
</ol>

<div class="tap-item container" id="itemBox">
    <div class="item show">content1: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti eum fuga illo illumin iusto laborum nesciunt nostrum sequi veritatis.</div>
    <div class="item">content2: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab blanditiis deleniti, inrepellat reprehenderit sed?</div>
    <div class="item">content3: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos ea exercitationemipsam nisi non quos sequi voluptates.</div>
    <div class="item">content4: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error impedit porro rem.</div>
</div>

<script src="http://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
        crossorigin="anonymous"></script>

<script>
    ;(function (win, $) {
        var tap = function (obj) {
            this.navList = $(obj.nav);
            this.itemList = $(obj.item);
            this.navEvent();
        };
        $.extend(true, tap.prototype, {
            navEvent: function () {
                var _this = this;
                this.navList.click(function (e) {
                    e.preventDefault();
                    var _vm = $(this);
                    var _index = _vm.index();
                    _vm.addClass('on').siblings().removeClass('on');
                    _this.itemList.eq(_index).addClass('show').siblings().removeClass('show');
                })
            }
        });
        tap.init = function (obj) {
            new this(obj)
        };
        win.MySelfTap = tap;
    })(window, jQuery);
</script>
<script>
    //初始化tap
    MySelfTap.init({nav: '#tapList>li', item: '#itemBox>.item'});
</script>
</body>
</html>