<!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. NB学校的NB课程的NB教材——CSAPP

    CMU是全美以至全球公认的CS最猛的大学之一,没办法,作为CS的发源地,再加上三位神一样的人先后在此任教:Alan Perlis(CS它祖宗+第一届Turing奖获得者).Allen Newell(A ...

  2. php 解密$OOO0O0O00=__FILE__

    转自:https://www.cnblogs.com/g2star/p/3688350.html <?php // Copyright © 2009-2010 xxx.com 版权所有$OOO0 ...

  3. spring 启动找不到shiro中 自定义的realm对应的class问题

    干巴巴盯着项目半天,启动了好多次,每次都是sping报错找不到shiro配置文件中自定义的realm对应的class文件,明明有的,就是找不到. 后来将eclipse对应的jdk1.7 更新为1.8 ...

  4. 服务器端 less的安装

    一. 安装 npm apt-get install npm 二. 安装less 在服务器端安装 LESS 的最简单方式就是通过 npm(node 的包管理器), 像这样: $ npm install ...

  5. nginx 学习 不断更新

    nginx 常用全局变量 $uri: 当前请求的uri,不带参数 $request_uri: 请求的uri,带完整参数 $host: http请求报文中host首部,如果没有则以处理此请求的虚拟主机的 ...

  6. NLP自然语言处理原理及名词介绍

    1. 自然语言概念 自然语言,即我们人类日常所使用的语言,是人类交际的重要方式,也是人类区别其他动物的本质特征. 但是我们只能通过自然语言与人交流,无法与计算机进行交流. 2. 自然语言处理 自然语言 ...

  7. hibernate-第一章-基础

    一,简介 hibernate是一个开源的ORM框架,它对我们的jdbc进行了轻量级的对象封装,它将我们的POJO与数据库表简历映射关系,是一个全自动的ORM框架;hibernate可以自动生成SQL语 ...

  8. php配置文件参数设置

    pm.max_children 设置多大合适? 一.pm.max_children 多大合适? 这个值原则上是越大越好,php-cgi的进程多了就会处理的很快,排队的请求就会很少. 设置”max_ch ...

  9. Python 的 JPype 模块调用 Jar 包

    背景与需求 最近学习并安装使用了HttpRunner框架去尝试做接口测试,并有后续在公司推广的打算. HttpRunner由Python开发,调用接口时需要依赖Python:而大多数公司的扩展工具包使 ...

  10. RabbitMQ开启服务却无法登录

    我之前无聊之际修改了我的电脑名,后来发现我的rabbitmq服务无法开启,后来我又把电脑名改回去了还是不行,我从网上看了很多教程都没有成功,后来看到了这个方法,出处忘记了,不好意思,发出来记忆一下 包 ...