//tab.js
;(function(global) {
    "use strict";
    var M = function(el,options) {
        this.el = typeof el === "string" ? document.querySelector(el) : el;
        this.options = JSON.stringify(options) !='{}'?options:false;
        this.options && this.tabTitle();
    };

    M.prototype = {
        // 创建tab,并且绑定事件回调
        tabTitle:function(){
            let _this = this;
            for(var i = 0; i<=this.options.Title.length-1;i++){
                let li = document.createElement("li");
                li.start = i;
                var textnode = document.createTextNode(`${this.options.Title[i]}`);
                li.onclick = function(){
                    for(var k =0;k<=_this.el.getElementsByTagName("li").length-1;k++){
                        _this.el.getElementsByTagName("li")[k].className = '';
                    };
                    this.className = 'active';
                    _this.options.content&&_this.contentEvetn(this.start);
                    _this.options.titleEvent&&_this.options.titleEvent(this.start);
                };
                li.appendChild(textnode);
                this.el.appendChild(li);
            };
            (this.options.defaultIndex && this.defaultIndexEvetn(this.options.defaultIndex-1))||(!this.options.defaultIndex && this.defaultIndexEvetn(0))
        },
        // 默认展示第几项
        defaultIndexEvetn:function(activeDom){
            this.el.getElementsByTagName("li")[activeDom].className = 'active';
            if(this.options.content){//是否有内容容器切换，有就设置默认选项
                let content = document.getElementById(this.options.content);
                content.getElementsByTagName('div')[activeDom].style.display = 'block';
                // 记录上次展示的容器下标
                this.options.index = activeDom
            }; 
        },
        // 切换内容
        contentEvetn:function(index){
            if(index == this.options.index){return;};
            let content = document.getElementById(this.options.content);
            let content1 = content.getElementsByTagName('div');
            content1[this.options.index].style.display = 'none';
            content1[index].style.display = 'block';
            this.options.index = index;
        }
    };

    if (typeof module !== 'undefined' && module.exports) module.exports = M;
    if (typeof define === 'function') define(function() { return M; });
    global.tab = M;

})(this);

页面使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style type="text/css">
            ul,li{
                list-style:none;
                flex: 1;
                text-align: center;
                cursor: pointer;
            }
            ul{
                display: flex;
                margin: 0;
                padding: 0;
            }
            #div{
                width: 100%;
            }
            .active{
                color: red;
            }
            #content>div{
                display: none;
            }
    </style>
    <body>
            <div  style="width: 300px;height: 100px;margin-top: 30px;">
                <div id="div" >
                    <ul id="tabClick" style="border: 1px solid #000;"></ul>
                    <div id="content">
                        <div>111</div>
                        <div>222</div>
                        <div>333</div>
                    </div>
                </div>
            </div>
            
        <script src="./tab.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
             var mObj = new tab("#tabClick",{
                  Title:['首页','新闻','时尚'],//选卡标题
                  content:'content',//切换内容节点id
                  defaultIndex:2,//默认选中第几项
                  titleEvent:function(res){//选项卡事件回调
                      console.log('选择了第'+res)
                  }
             });
        </script>
    </body>
</html>
//更多功能关注下一篇2.0
欢迎转发

我是马丁的车夫，欢迎转发收藏！

posted on 2021-03-04 16:18 马丁的车夫阅读(77) 评论(0) 收藏举报

刷新页面返回顶部

导航