ES6模块化探究tab切换新模式

最新推荐文章于 2024-07-26 11:48:42 发布

前端歌谣

最新推荐文章于 2024-07-26 11:48:42 发布

阅读量24

点赞数

文章标签： es6 前端 ecmascript 开发语言 javascript

原文链接：https://mp.weixin.qq.com/s?__biz=MzIzODE1OTUwMw==&mid=2247487996&idx=1&sn=058d321ebe4d09a62c50749474c90fcc&chksm=e93cc21cde4b4b0afe65544325516d77d042810fc0bf6e2a704843d1d23185c03ea46ee48261&scene=126&sessionid=0

版权

前言

我是歌谣最好的种树是十年前其次是现在今天继续给大家带来的是原生js实现tab切换的讲解

环境配置

npm init -y
yarn add vite -D

修改page.json配置端口

{
  "name": "demo1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "vite --port 3002"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "vite": "^4.4.9"
  }
}

目录结构

index.html

<!DOCTYPE html>
<html lang="en">




<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tab</title>
    <link rel="stylesheet" href="./index.css">
</head>




<body>
    <div class="tab J_tab"></div>
        <!-- <div class="nav">
            <div class="nav-item current">选项1</div>
            <div class="nav-item">选项2</div>
            <div class="nav-item">选项3</div>
        </div> -->
        <script type="text/html" id="J_navItemTpl">
            <div class="{{navStyleClass}}">{{navItemTitle}}</div>
</script>
        <!-- <div class="page">
            <div class="page-item current">页面1</div>
            <div class="page-item">页面2</div>
            <div class="page-item">页面3</div>
        </div> -->
        <script type="text/html" id="J_pageItemTpl">
            <div class="{{pageStyleClass}}">
                <p>{{city_name}}</p>
                <p>{{intro}}</p>
            </div>
</script>
        <div style="display: none;" id="J_cityData">
            [{
            "id":"1",
            "city_name":"北京",
            "intro":"北京很棒"
            },
            {
            "id":"2",
            "city_name":"上海",
            "intro":"上海很棒"
            },
            {
            "id":"3",
            "city_name":"天津",
            "intro":"天津很棒"
            }]
        </div>
  
    <script src="./tools.js"></script>
    <script src="./index.js"></script>
    <script type="text/javascript">
        var tab = new Tab({
            classObject: {
                el: '.J_tab'
            }
        }).init()
</script>
</body>




</html>

index.js

; (function (doc, initTools) {
    var Tab = function (options) {
        this.oTab = doc.getElementsByClassName('J_tab')[0];
        this.oNav = doc.createElement("div")
        this.oPage = doc.createElement("div")
        this.oNav.className = 'nav'
        this.oPage.className = 'page'
        // this.oPage = oTab.getElementsByClassName('page')[0]
        // this.oNav = oTab.getElementsByClassName('nav')[0]
        // this.oNavItems = this.oNav.getElementsByClassName('nav-item')
        // this.oPageItem = this.oPage.getElementsByClassName('page-item')
        this.navItemTpl = doc.getElementById("J_navItemTpl").innerHTML;
        this.pageItemTpl = doc.getElementById("J_pageItemTpl").innerHTML;
        var cityDataDom = doc.getElementById('J_cityData').innerHTML
        console.log(cityDataDom)
        this.cityData = JSON.parse(doc.getElementById('J_cityData').innerHTML);




        this.curIdx = 0
        // this.classObject=options.classObject
    }




    Tab.prototype.init = function () {
        this.render()
        this.bindEvent()
    }
    Tab.prototype.renderNav = function (data) {
        var list = ''
        data.forEach((item, index) => {
            list += this.navItemTpl.replace(/{{(.*?)}}/g, function (node, key) {
                return {
                    navStyleClass: !index ? 'nav-item current' : 'nav-item',
                    navItemTitle: item.city_name
                }[key];
            })
        }, this);
        console.log(list)
        return list
    }
    Tab.prototype.renderPage = function (data) {
        var list = ''
        data.forEach((item, index) => {
            list += this.pageItemTpl.replace(/{{(.*?)}}/g, function (node, key) {
                return {
                    pageStyleClass: !index ? 'page-item current' : 'page-item',
                    city_name: item.city_name,
                    intro: item.intro
                }[key];
            })
        }, this);
        console.log(list)
        return list
    }
    Tab.prototype.render = function () {




        var oFrag = doc.createDocumentFragment()
        this.oNav.innerHTML = this.renderNav(this.cityData)
        this.oPage.innerHTML = this.renderPage(this.cityData)
        oFrag.append(this.oNav)
        oFrag.append(this.oPage)
        this.oTab.appendChild(oFrag)
    }
    Tab.prototype.bindEvent = function () {
        this.oNavItems = this.oNav.getElementsByClassName('nav-item')
        this.oPageItem = this.oPage.getElementsByClassName('page-item')
        this.oNav.addEventListener('click', this.onNavClick.bind(this), false)
    }
    Tab.prototype.onNavClick = function (ev) {




        var tar = initTools.getTarget(ev)
        var className = tar.className
        if (className === 'nav-item') {
            this.setCurrent(this.curIdx, 'remove')
            // this.oNavItems[this.curIdx].className = 'nav-item'
            // this.oPageItem[this.curIdx].className = 'page-item'
            this.curIdx = [].indexOf.call(this.oNavItems, tar)
            // this.oNavItems[this.curIdx].className += ' current'
            // this.oPageItem[this.curIdx].className += ' current'
            this.setCurrent(this.curIdx, 'add')
        }
    }
    Tab.prototype.setCurrent = function (index, field) {
        // var navItemClass = this.classObject.navItem
        // var pageItemClass = this.classObject.pageItem
        switch (field) {
            case 'add':
                this.oNavItems[index].className = 'nav-item current';
                this.oPageItem[index].className = 'page-item current';
                break;
            case 'remove':
                this.oNavItems[index].className = 'nav-item'
                this.oPageItem[index].className = 'page-item'
                break;
            default:
                break;




        }
    }
    window.Tab = Tab
})(document, initTools)

index.css

.tab{
    width: 500px;
    height: 500px;
    margin:50px auto;
    border: 1px solid #000;
}
.tab .nav{
    height: 50px;
    border-bottom: 1px solid #000;
}
.tab .nav-item{
    float: left;
    width: 33.33%;
    height: 100%;
    text-align: center;
    line-height: 50px;
}
.tab .nav-item.current{
    background-color: #000;
    color: #fff;
}
.tab .page{
    position: relative;
    height: 450px;
}
.tab .page-item{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    /* line-height: 450px; */
    font-size: 100px;
}
.tab .page-item.current{
    display: block;
}

运行结果

点击上方蓝字关注我们

下方查看历史文章

ES6模块化探究tab切换

ES6模块化开发计算器

vue2+element环境搭建利用xlsx实现excel解析预览效果

vue2+element环境搭建实现table编辑效果

前端歌谣

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6模块化探究tab切换新模式

前言我是歌谣最好的种树是十年前其次是现在今天继续给大家带来的是原生js实现tab切换的讲解环境配置npm init -yyarn add vite -D修改page.json配置端口{ "name": "demo1", "version": "1.0.0", "description": "", "main": "index.js", "scripts": ...
复制链接

扫一扫