<!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. js关于“变量提升、作用域、私有作用域等知识点”高级解题思路

    var i = 2,    x = 5;var fn = function (x) {    x += 3;    return function (y) {        console.log(( ...

  2. 提取 linux 文件目录结构

    提取 linux  文件的目录结构 find /home/user1/ -type d |while read line ;do mkdir -p /home/user2/$line;done

  3. 查询sql 索引

    SELECT indexname = a.name , tablename = c. name , indexcolumns = d .name , a .indidFROM sysindexes a ...

  4. day 21 - 1 包，异常处理

    创建目录代码 1. 无论是 import 形式还是 from...import 形式,凡是在导入语句中(而不是在使用时)遇到带点的,都要第一时间提高警觉:这是关于包才有的导入语法2. 包是目录级的(文 ...

  5. python3元组

    Python3 元组 元组运算符 len((1, 2, 3)) 3 计算元素个数 (1, 2, 3) + (4, 5, 6) (1, 2, 3, 4, 5, 6) 连接 ('Hi!',) * 4 (' ...

  6. TypeError: softmax() got an unexpected keyword argument 'axis'

    出现这个问题,有几种解决办法,可以调低一下keras的版本,比如: pip install keras==2.1 不过还有个更方便的方法,从错误可知softmax中不包含axis这个参数,那么把axi ...

  7. MVC 前端页面ViewData参数名不区分大小写

    项目中实际应用: 后台赋值时传的是:ViewData["CheckedSystemMenu"], 前台取值时:ViewData["checkedsystemmenu&qu ...

  8. 开源智能英文单词提取翻译工具(C#)

    WordsTool 这个工具用于分析文本文件中所有的英语单词 并且通过内置字典数据库工具对这些单词进行解析 可以生成表格形式 并且支持导出到excel文件中 用于学习单词 本代码禁止商业用途 如需要商 ...

  9. Linux中普通用户配置sudo权限（带密或免密）

    配置步骤如下: 1.登陆或切换到root用户下: 2.添加sudo文件的写权限,命令是:chmod u+w /etc/sudoers 3.编辑sudoers文件:vi /etc/sudoers 找到这 ...

  10. 学习 razor pages 指南

    这是一个系列,我打算把此人的系列翻译一下,学习技术的同时,顺便提高一下英文水平. 原文地址:https://www.learnrazorpages.com/ 前言 欢迎来学习 razor pages ...