ES6模块化探究tab切换

最新推荐文章于 2024-09-03 17:48:13 发布

前端歌谣

最新推荐文章于 2024-09-03 17:48:13 发布

阅读量28

点赞数

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

原文链接：https://mp.weixin.qq.com/s?__biz=MzIzODE1OTUwMw==&mid=2247487980&idx=1&sn=17cbf8b2d8d3ab93ea73cd53c6f271d3&chksm=e93cc20cde4b4b1a8bd9c10a6d7ffd4ef7d9d5187054810738ee0602cf052a850777c59ed4fa&scene=126&sessionid=0

版权

前言

我是歌谣最好的种树是十年前其次是现在今天继续给大家带来的是探究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 class="nav">
            <div class="nav-item current">选项1</div>
            <div class="nav-item">选项2</div>
            <div class="nav-item">选项3</div>
        </div>
        <div class="page">
            <div class="page-item current">页面1</div>
            <div class="page-item">页面2</div>
            <div class="page-item">页面3</div>
        </div>
    </div>
    <script src="./index.js"></script>
    <script type="text/javascript">
        var tab=new Tab().init()
</script>
</body>
</html>

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;
}

index.js

; (function (doc) {
    var Tab = function () {
        var oTab = doc.getElementsByClassName('J_tab')[0];
        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.curIdx = 0
    }
    Tab.prototype.init = function () {
        this.bindEvent()
    }
    Tab.prototype.bindEvent = function () {
        this.oNav.addEventListener('click', this.onNavClick.bind(this), false)
    }
    Tab.prototype.onNavClick = function (ev) {
        var e = ev || window.event
        var tar = e.target || e.srcElement
        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) {
        switch (field) {
            case 'add':
                this.oNavItems[index].className += ' current'
                this.oPageItem[index].className += ' current'
                break;
            case 'remove':
                this.oNavItems[index].className = 'nav-item'
                this.oPageItem[index].className = 'page-item'
                break;
            default:
                break;
            
        }
    }
    window.Tab = Tab
})(document)

运行结果

优化版本

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 class="nav">
            <div class="nav-item current">选项1</div>
            <div class="nav-item">选项2</div>
            <div class="nav-item">选项3</div>
        </div>
        <div class="page">
            <div class="page-item current">页面1</div>
            <div class="page-item">页面2</div>
            <div class="page-item">页面3</div>
        </div>
    </div>
    <script src="./tools.js"></script>
    <script src="./index.js"></script>
    <script type="text/javascript">
        var tab = new Tab({
            classObject: {
                el:'.J_tab',
                navItem: {
                    origin: 'nav-item',
                    current: 'nav-item current'
                },
                pageItem: {
                    origin: 'page-item',
                    current: 'page-item current'
                }
            }
        }).init()
</script>
</body>




</html>

index.js

; (function (doc,initTools) {
    var Tab = function (options) {
        var oTab = doc.getElementsByClassName('J_tab')[0];
        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.curIdx = 0
        this.classObject=options.classObject
    }
    Tab.prototype.init = function () {
        this.bindEvent()
    }
    Tab.prototype.bindEvent = function () {
        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 = navItemClass.current;
                this.oPageItem[index].className = pageItemClass.current;
                break;
            case 'remove':
                this.oNavItems[index].className = navItemClass.origin
                this.oPageItem[index].className = pageItemClass.origin
                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;
}

tool.js

var initTools=(function(){
    function getTarget(ev){
        var e=ev||window.event;
        return e.target||e.srcElement
    }
    return{
        getTarget:getTarget
    }
})()

运行结果

点击上方蓝字关注我们

点个在看你最好看

下方查看历史文章

ES6模块化开发计算器

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

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

ES6模块化开发计算器小案例

前端歌谣

关注

0
点赞
踩
0

收藏

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

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

扫一扫