<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>Document</title>

    <script src="./TabsController.js"></script>

    <style>

      ul,

      li {

        list-style: none;

        margin: 0;

        padding: 0;

      }

      .tab .tab-bar {

        display: flex;

        border-bottom: 1px solid blue;

      }

      .tab .tab-bar li {

        margin: 3px 20px 0 0;

        width: 30px;

        text-align: center;

      }

      .tab .tab-bar li.active {

        border: 1px solid blue;

        border-bottom: none;

      }

      .tab .tab-content li {

        display: none;

      }

      .tab .tab-content li.active {

        display: block;

      }

    </style>

  </head>

  <body>

    <div class="tab">

      <ul class="tab-bar">

        <li>

          1

        </li>

        <li>

          2

        </li>

        <li>

          3

        </li>

      </ul>

      <ul class="tab-content">

        <li>content1</li>

        <li>content2</li>

        <li>content3</li>

      </ul>

    </div>

  </body>

  <script>

    new TabsController(document.querySelector(".tab"));

  </script>

</html>


/**

 *自己封装的一个基础的Tabs组件

 *使用时只需要在页面引入js然后将html中div.tab复制，使用new TabsController(element)即可

 */

class TabsController {

  constructor(element) {

    this.nav = element.querySelector(".tab-bar").children;

    this.content = element.querySelector(".tab-content").children;

    this.active = 1; //当前激活的标签

    this.init(); //初始化

    this.bindEvents(); //绑定事件

  }

  init() {

    this.nav[0].classList.add("active");

    this.content[0].classList.add("active");

  }

  bindEvents() {

    //封装foreach方法用来遍历节点

    const forEach = (context, fn) => Array.prototype.forEach.call(context, fn);

    //封装indexOf方法用来判断当前节点在父节点的中的次序

    const indexOf = (context, item) =>

      Array.prototype.indexOf.call(context, item);

    forEach(this.nav, i => {

      i.addEventListener("click", e => {

        forEach(this.nav, i => i.classList.remove("active"));

        forEach(this.content, i => i.classList.remove("active"));

        this.active = indexOf(this.nav, e.target);

        this.nav[this.active].classList.add("active");

        this.content[this.active].classList.add("active");

      });

    });

  }

}

原生JS制作简易Tabs组件的更多相关文章

  1. 利用css+原生js制作简易钟表

    利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...

  2. 原生JS实现简易轮播图

    原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...

  3. 使用 原生js 制作插件 (javaScript音乐播放器)

    1.引用页面 index.html <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  4. 基于原生js的返回顶部组件，兼容主流浏览器

    基于原生js的返回顶部插件,兼容IE8及以上.FF.chrome等主流浏览器. js文件中封装了getScrollTop()和changeScrollTop()函数分别用于获取滚动条滚动的高度和修改滚 ...

  5. 原生Js_制作简易日历

    javascript制作简易日历,月份信息已经放在一个数组中,在<script>...</script>中编写代码实现其功能 实现步骤 a) 获取需要操作的dom对象 b) 在 ...

  6. 原生JS实现简易转盘抽奖

    我爱撸码,撸码使我感到快乐. 大家好,我是Counter. 本章带大家来简单的了解下原生JS实现转盘抽奖. 因为主要涉及到JS,在这里HTML和CSS起到的功能就没有那么重要, 因此,没有过多的阐述H ...

  7. 原生js制作播放器

    以前 就想做一个播放器,一直没狠下心来,今天终于狠下心来,把这个做出来了(因为有点无聊) 做这个播放器  也百度了一下, 你叫我做,我肯定做不出来, 就算用jquery  我也做不出来. 以前也用过a ...

  8. 【带着canvas去流浪（13）】用Three.js制作简易的MARVEL片头动画（下）

    目录 一. 模型的制作 1.1 生成字体模型 1.2 多表面贴图 二. 镜头及动画 三. 大作业总结 示例代码托管在:http://www.github.com/dashnowords/blogs 博 ...

  9. 原生js之canvas时钟组件

    canvas一直是前端开发中不可或缺的一种用来绘制图形的标签元素,比如压缩上传的图片.比如刮刮卡.比如制作海报.图表插件等,很多人在面试的过程中也会被问到有没有接触过canvas图形绘制. 定义 ca ...

随机推荐

  1. JSP/Serlet 使用fileupload上传文件

    需要引用的jar commons-fileupload-1.3.1.jar commons-io-2.2.jar index.jsp <body> <center> <h ...

  2. 深入web的请求过程

    一.深入web的请求过程 1.1.B/S网络架构概述 · 从前端到后端,都基于应用层协议HTTP来交互数据.一个请求就对应了一个操作,完成操作之后就断开了连接.基于这样的特点可以用来满足海量的用户的操 ...

  3. DS博客作业02—线性表

    1.思维导图及学习体会 1.1第一章绪论知识点思维导图 1.2.谈谈你对线性表的认识及学习体会. 线性表最重要的就是对指针的操作,插入删除都是看指针的指向进行操作以达到改变节点,以达到目的的.对于上学 ...

  4. DoraBox 漏洞练习平台

     项目地址: https://github.com/gh0stkey/DoraBox SQL注入 SQLi 数字型 判断表中有多少列 http://127.0.0.1/DoraBox/sql_inje ...

  5. module.ngdoc

    译自Angular's module docs 1.模块 大部分的应用都有一个主要的方法来实例化,链接,引导.angular应用没有这个方法,而是用模块声明来替代. 这种方式的优点: *程序的声明越详 ...

  6. 2018-2019-2 20165234 《网络对抗技术》 Exp1 PC平台逆向破解

    实验一 PC平台逆向破解 实验目的 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数,foo函数会简单回显任何用户输入的字符串. 该程序同时包含另 ...

  7. RNN回归

    import torch from torch import nn import numpy as np import matplotlib.pyplot as plt # torch.manual_ ...

  8. python笔记01-05

    作者:Vamei 出处:http://www.cnblogs.com/vamei https://blog.csdn.net/flyfrommath/article/details/77447587 ...

  9. docker容器和镜像的导入和导出

    镜像的保存 [root@wxtest1607 ~]# docker images REPOSITORY TAG IMAGE ID CREATED SIZE tomcat8 3.0 90457edaf6 ...

  10. nginx实现https的配置文件

    server { listen ; server_name testplatform.itegou.com; proxy_set_header X-Forwarded-Host $host; prox ...