前端歌谣-第叁拾玖课-ES6模块化探究tab切换

最新推荐文章于 2024-05-07 11:25:37 发布
最新推荐文章于 2024-05-07 11:25:37 发布
阅读量91 收藏 5
点赞数 5
文章标签： 前端 es6 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41632427/article/details/133925729
版权

前言

我是歌谣 最好的种树是十年前 其次是现在 今天继续给大家带来的是探究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
    }
})()

运行结果

在这里插入图片描述

前端歌谣
关注
专栏目录
前端各种Tab效果
01-16
各种Tab效果，需要的请拿走，适合各种应用场景，PC端网页或移动应用
tab页前端实现 demo
u010060906的专栏
09-04 467
【代码】记录一下 demo。
突破编程_前端_JS编程实例（网站标题栏TAB组件）
突破编程
03-04 1138
JS编程实例：网站标题栏TAB组件
前端实例：Tab栏切换
Harris-H的博客
10-23 2434
前端实例：TabTabTab栏切换 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>
前端实现tab栏切换，这么常见的案例你学会了吗？
阿牛的博客
03-31 1万+
tab栏切换制作是我们web开发中一个十分常见的案例，今天在这里写写，希望对大家有所帮助，还是要用到我们上节写到的排他思想！好好学哦！
ember-cli-webcomponents-bundler：使用ES6模块捆绑Web组件
02-06
允许在Ember应用程序中使用通过ES6模块使用的Web组件。 安装 ember install ember-cli-webcomponents-bundler 用法 可以在config/environment.js中config/environment.js插件选项。 配置示例： 'ember-cli-web...
es6-module-transpiler-globals-formatter:ES6 模块转换器扩展以将导出的内容输出为全局变量
06-25
es6-module-transpiler-globals-formatter ES6 模块转换器扩展以将导出的内容输出为全局变量。 安装 $ npm install --save-dev es6-module-transpiler-globals-formatter 用法 只需将formatter键设置为...
es6-module-transpiler-dist-formatter:ES6 模块转译器扩展到输出 Dist Bundle 格式
07-11
由于此格式化程序是 [es6-module-transpiler] 的插件，您可以将它与任何现有的支持 [es6-module-transpiler] 作为底层引擎的构建工具一起使用，以转换 ES6 模块。 您只需要确保这些工具可以访问es6-module-...
cubism-es：cubism.js的ES6模块，基于d3v5
02-05
立体派-ES是一个ES6模块，基于D3V5。 重要信息1.1.0版包含api中断。 请参阅下面的详细资料 用法： ES6的用法 npm install cubism-es --save import { context } from 'cubism-es'; 请注意，添加cubism-es会将d3...
es6-module-transpiler-system-formatter:ES6 模块转译器扩展到输出 `System.register()` 格式
06-29
ES6 模块转换器es6-module-transpiler是一个实验性编译器，它允许您使用当前 ES6 模块语法的子集编写 JavaScript，并将其编译为各种格式。 es6-module-transpiler-system-formatter是专注于将 ES6 模块语义带回 ES5 ...
【JavaScript】前端必学的tab栏切换布局分析
m0_67619362的博客
04-29 1232
(1) tab栏切换有两个大的模块（布局html） (2) 模块选项卡中，点击某一个，当前这一个底色会是红色，其余不变(排他思想 (3) 下面的模块内容，会跟随上面的选项卡变化。所以下面模块变化写到选项卡里面 最终效果： 默认状态： ![在这里插入图片描述](https://img-blog.csdnimg.cn/ 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 d8a3c5b8be19471b97d1af4f3350cfa3.pn.
【JavaScript】前端必学的tab栏切换布局分析，覆盖所有面试知识点
m0_60721823的博客
04-16 803
但是在上例中我们获取的是元素属性值，并不是自定义属性值。另外，大推一个网上教程 现代 JavaScript 教程 ，文章深入浅出，很容易理解，上面的内容几乎都是重点，而且充分发挥了网上教程的时效性和资料链接。（2） element.getAttribute(‘属性’) //主要获得自定义的属性（指程序员自己定义的属性）（2） element.setAttribute(‘属性’) //主要设置自定义的属性（指程序员自己定义的属性）想要取得优秀的面试成绩，刷面试题是必须的，除非你样样精通。
前端小案例之tab栏切换
weixin_45525630的博客
07-31 931
最近学习vue的时候用vue实现了一个简单的tab栏切换，分享给大家 文章目录一、案例介绍？二、案例代码总结 一、案例介绍？ 效果如下: 该案例主要是在tab盒子上面放一个ul里面有五个小li，下方对应的是五个盒子，通过控制下面图片盒子的显示隐藏和对比currentIndex和index的值来对应显示相应的盒子。 二、案例代码 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset=.
2024年最全前端实现tab栏切换，这么常见的案例你学会了吗？(1)，html的常用标签
最新发布
2401_84411557的博客
05-07 772
如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】上期传送门：👉初识 JavaScript（揭开javascript的神秘面纱）👉javascript中的数据类型👉javascript中的数据类型转换👉javascript 基础案例（循环）👉。
前端基础之tab栏切换
m0_53602804的博客
01-27 616
状态栏转换基础
前端vue可以左右滚动的切换的tabs tabs选项卡 滑动动画效果 自动宽度
chenchuang0128的博客
06-12 7349
swiperTabList: ["2023-06-10","2023-06-11","2023-06-12","2023-06-13","2023-06-14","2023-06-15"], //导航列表。swiperTabList: ["2023-06-10","2023-06-11","2023-06-12","2023-06-13","2023-06-14","2023-06-15"], //导航列表。curSwiperLineActiveBg: '#1D63FF', //当前选中的导航栏线条颜色。
前端table分页组件开发（手写组件）
热门推荐
m0_58002043的博客
06-02 2万+
到现在是实现了，当点击父组件的内容是，顶部table实时更新，然后要实现的就是我们点击顶部的table，父组件的内容更新了，这里我们需要做的就是，获取到当前点击的是什么内容，然后通过emit函数，将我们选中的内容传递出去，让父组件根据我们传递的数据实时渲染。先看下需求，在页面的顶部加入一样table，当我们点击table时底部的页面切换，中间的内容根据切换的tab来切换，tablei里还有小table，当点吉小table时，小table也跟着切换，先来看下实际的结果图。
前端项目实践案例——制作Tab选项卡点击切换效果
shhghvvh的博客
11-23 3457
制作Tab选项卡点击切换效果
使用React、Webpack和Babel构建ES6模块化JavaScript应用实战
"这篇文章介绍了如何基于ES6，使用React、Webpack和Babel构建模块化的JavaScript应用程序。它涵盖了从创建React应用，使用ES6语法，到发布组件到NPM，以及在后续项目中复用这些代码的全过程。作者强调了组件的...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值