js插件编程-tab框

Posted zhuyapeng

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js插件编程-tab框相关的知识，希望对你有一定的参考价值。

JS代码

(function (w) {
    //tab对象
    function Tab(config) {
        //定义变量，防止变量污染
        this.tabMenus=null;
        this.tabMains=null;
        if(config){
            this._init(config);
        }
    }
    //为原型添加属性，防止内存重复创建
    Tab.prototype={
        _init:function (config) {
            //初始化元素
            this.initElements(config);
            this.initEvent();
            if(config.auto){
                this.autoPlay();
            }
        },
        initElements:function (config) {
            var tabMenu=document.getElementById(config.tabMenu);
            var tabMain=document.getElementById(config.tabMain);

            this.tabMenus=tabMenu.children;
            this.tabMains=tabMain.children;
        },
        initEvent:function () {
            for(var i=0;i<this.tabMenus.length;i++){
                var li=this.tabMenus[i];
                li.index=i;
                //定义this变量存储，闭包环境可以调用此变量
                var that=this;
                li.onclick=function () {
                    that.change(this);
                }
            }
        },
        change:function (tabMenu) {
            for(var i=0;i<this.tabMenus.length;i++){
                this.tabMenus[i].className="";
                this.tabMains[i].className="main";
            }
            tabMenu.className="active";
            this.tabMains[tabMenu.index].className+=" select";
        },
        autoPlay:function () {
            var index=0;
            var that=this;
            setInterval(function () {
                index++;
                if(index>=that.tabMenus.length){
                    index=0;
                }
                that.change(that.tabMenus[index]);
            },2000);
        }
    }
    //将插件暴露给windows
    w.Tab=Tab;
})(window)

 

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="tab.css">
</head>
<body>
    <div class="wrapper">
        <ul class="tab" id="menu">
            <li class="active">国际大牌<span>◆</span></li>
            <li>国妆名牌<span>◆</span></li>
            <li>清洁用品<span>◆</span></li>
            <li>男士精品</li>
        </ul>
        <div class="products" id="main">
            <div class="main select"><a href="#"><img src="imgs/guojidapai.jpg"></a></div>
            <div class="main"><a href="#"><img src="imgs/guozhuangmingpin.jpg"></a></div>
            <div class="main"><a href="#"><img src="imgs/qingjieyongpin.jpg"></a></div>
            <div class="main"><a href="#"><img src="imgs/nanshijingpin.jpg"></a></div>
        </div>
    </div>
</body>
<script type="text/javascript" src="tab.js"></script>
<script>
    var tb=new Tab({
        tabMenu:"menu",
        tabMain:"main",
        auto:true
    });
</script>
</html>

css代码

 html,body,ul,li {
     margin: 0;
     padding: 0;
 }
 ul{
     list-style: none;
 }
 .wrapper {
     margin: 0 auto;
     width: 1000px;
     height: 475px;
     margin-top: 100px;
 }
 .wrapper .tab {
     width: 320px;
     height: 36px;
     border: 1px solid #ddd;
     border-bottom: 0;
 }
 .wrapper .tab li{
     float:left;
     width: 80px;
     height: 34px;
     line-height: 34px;
     cursor: pointer;
     text-align: center;
     border-top: 4px solid #fff;
     position: relative;
 }
 .wrapper .tab .active{
     border-top: 4px solid red;
 }
 .wrapper .tab span{
     width: 1px;
     height: 14px;
     background-color: #ddd;
     position: absolute;
     right:0px;
     top:10px;
     overflow: hidden;
 }
 .wrapper .products{
     width: 1002px;
     height: 476px;
     border:1px solid #ddd;
 }

 .wrapper .products .main{
     float: left;
     display: none;
 }
 .wrapper .products .select{
     display: block;
 }

 

以上是关于js插件编程-tab框的主要内容，如果未能解决你的问题，请参考以下文章

前端Vue项目：旅游App-city：搜索框search和标签页Tabs

[搬运] 将 Visual Studio 的代码片段导出到 VS Code

VSCode自定义代码片段——JS中的面向对象编程

VSCode自定义代码片段9——JS中的面向对象编程

JS实现下拉框切换和tab标签切换

阿里java开发规范学习(附P3C IDEA插件 帮助规范的养成)