<!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. Swift 4 经典数据结构 Data Struct大全

    快速看看吧,看看大神是如何写出最swifty的算法.我先fork一下,以表敬意. https://github.com/Imputes/swift-algorithm-club

  2. C# NPOI 操作Excel 案例

    1.加入NPOI 程序集,使用nuget添加程序集 2.引用NPOI程序集 private IWorkbook ExportExcel(PrintQuotationOrderViewModel mod ...

  3. spring kafka生产、消费消息

    参考网址: https://blog.csdn.net/lansetiankong12/article/details/54946641 1.新建Maven项目-KafkaMaven ->点击n ...

  4. ESLint学习小记

    一.关于配置文件,优先级从上到下: eslintrc.js .eslintrc.yaml .eslintrc.yml .eslintrc.json .eslintrc package.json 在官方 ...

  5. 基于Spring注解搭建SpringMVC项目

    在2018寒冬,我下岗了,因为我的左脚先迈进了公司的大门.这不是重点,重点是我扑到了老板小姨子的怀里. 网上好多教程都是基于XML的SpringMVC,想找一篇注解的,但是写的很模糊,我刚好学到这里, ...

  6. 盒子取球C语言 蓝桥杯

    盒子取球方法二今盒子里有 n 个小球,A.B 两人轮流从盒中取球,每个人都可以看到另一个人取了多少个, 也可以看到盒中还剩下多少个,并且两人都很聪明,不会做出错误的判断. 我们约定:每个人从盒子中取出 ...

  7. WPF常见主界面的布局

    一.概述 效果图: 暂时没做完,请等待 二.实现 (一)实现无边框窗口 原文:WPF 窗口去除顶部边框(正宗无边框) ============================ 最近在做一个大屏展示视频 ...

  8. 【easy】268. Missing Number

    Given an array containing n distinct numbers taken from 0, 1, 2, ..., n, find the one that is missin ...

  9. TestNg框架基础入门

    TestNg框架简介: TestNG,即Testing, Next Generation,下一代测试技术,是一套根据JUnit 和NUnit思想而构建的利用注释来强化测试功能的一个测试框架.TestN ...

  10. Google 以 Flutter 作为原生突破口，移动端即将统一了

    Android 的前生今世 Android 系统 Android系统作为全球第一大系统,基于 Java 开发的移动端有着诸多的性能优势. 2018年前 H5 的性能瓶颈和 RN 的停更 导致业界对跨平 ...