<!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. HTML基础之JS中的字符转义--转义中文或特殊字符

    1.在标准的url的规范中是不允许出现中文字符或某些特殊字符的,所以要进行转义 2.& 代表参数的链接,如果就是想传& 给后端那么必须转义 decodeURI(url) URl中未转义 ...

  2. 执行docker命令遇到 Get Permission Denied

    安装完docker后,执行docker相关命令,出现: Got permission denied while trying to connect to the Docker daemon socke ...

  3. Anniversary party POJ - 2342 （树形DP）

    题目链接:  POJ - 2342 题目大意:给你n个人,然后每个人的重要性,以及两个人之间的附属关系,当上属选择的时候,他的下属不能选择,只要是两个人不互相冲突即可.然后问你以最高领导为起始点的关系 ...

  4. xls 打乱序列 -和给拼接字符串加上双引号

    打乱  给空列 添加函数 =RAND() ,下拉,排序,即可打乱 添加双引号: =""""&C1&"""" ...

  5. python3随机数函数

    随机数函数 choice(seq) 从序列的元素中随机挑选一个元素,比如random.choice(range(10)),从0到9中随机挑选一个整数. randrange ([start,] stop ...

  6. pwnable.tw calc

    题目代码量比较大(对于菜鸡我来说orz),找了很久才发现一个能利用的漏洞 运行之发现是一个计算器的程序,简单测试下发现当输入的操作数超过10位时会有一个整型溢出 这里调试了一下发现是printf(&q ...

  7. ogg 单表拆分合并进程

    metalink文档:1320133.1和1512633.1 map scott.emp1, target scott.emp1 ,FILTER(@RANGE(1,3));  --拆分 map sco ...

  8. wireshark & fiddler

    wireshark display filterhttps://www.wireshark.org/docs/wsug_html_chunked/ChWorkBuildDisplayFilterSec ...

  9. Java基础——Instanceof 运算符

    Instanceof 运算符 java 中的instanceof 运算符是用来在运行时指出对象是否为特定类的一个实例 instanceof运算返回值:boolean类型 用法 boolean resu ...

  10. WPF 10天修炼 第七天- WPF资源、样式、控件模板

    WPF资源 对象资源 WPF允许在XAML标记的任意位置定义资源.比如在特定的控件.窗口或应用程序级别定义资源,WPF资源系统提供的对象资源有如下好处: 1.  高效:使用对象资源可以在一个地方定义而 ...