这是我的第一篇博客 博客生涯才开始 但是人生已经过去了二十个年头了 才开始弄这个 也没搞得太懂 我原本的想法是想搞个源代码上来 但是看了半天好像就只能传html源代码 那我还有css js的部分呢 我还想给大伙看看功能呢 其实我老早就想开个博客了 一直没找到在哪里来弄 学倒是一直在学  就这么学下来了 从html css h5c3 移动端适配 js基本语法 jQuery 到现在的js高级语法 es6 只不过前面好像也没什么需要讲的 现在才刚刚 开始 今天搞了个 面向对象版的tab栏 整点图片 上来把 我的话和经验也都在图片里 新手新手

<!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>面向对象 Tab</title>

    <link rel="stylesheet" href="./styles/tab.css">

    <link rel="stylesheet" href="./styles/style.css">

</head>

<body>

    <main>

        <h4>

            Js 面向对象 动态添加标签页

        </h4>

        <div class="tabsbox" id="tab">

            <!-- tab 标签 -->

            <nav class="fisrstnav">

                <ul>

                    <li class="liactive"><span>测试1</span><span class="iconfont icon-guanbi"></span></li>

                    <li><span>测试2</span><span class="iconfont icon-guanbi"></span></li>

                    <li><span>测试3</span><span class="iconfont icon-guanbi"></span></li>

                </ul>

                <div class="tabadd">

                    <span>+</span>

                </div>

            </nav>

            <!-- tab 内容 -->

            <div class="tabscon">

                <section class="conactive">测试1</section>

                <section>测试2</section>

                <section>测试3</section>

            </div>

        </div>

    </main>

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

</body>

</html>
// 分析 整个tab栏就是他的对象 然后下来有 切换 新增 删除 修改的内容

var that

class Tab {

    constructor(id) {

        that = this

        // 1.获取元素

        this.main = document.querySelector(id)

        /* // 2.切换功能 先获取li和section

        this.lis = this.main.querySelectorAll('.fisrstnav li')

        this.sections = this.main.querySelectorAll('section') */

        // 3.新增功能 获取元素

        this.add = this.main.querySelector('.tabadd')

        this.ul = this.main.querySelector('ul')

        this.fsections = this.main.querySelector('.tabscon')

        this.init()

    }

    // 3.5 获取最新的li和section

    updateTogle() {

        this.lis = this.main.querySelectorAll('.fisrstnav li')

        this.sections = this.main.querySelectorAll('section')

        // 4.获取删除按钮 由于这个也是也一直在动态增加的 所以需要动态获取

        this.removes = this.main.querySelectorAll('.icon-guanbi')

        // 5.1动态获取第一个span的标签

        this.spans = this.main.querySelectorAll('li span:first-child')

    }

    // 2.1初始化函数 因为页面一刷新就会要绑定事件 需要一实例化 就绑定事件 就要一个初始化函数在构造函数里被调用

    init() {

        // 3.5获取最新数据

        this.updateTogle()

        // 3.1新增按钮就一个 所以不需要写在循环里、

        this.add.onclick = this.addTab

        // 2.2给lis绑定点击事件

        for (var i = 0; i < this.lis.length; i++) {

            // 2.4要完成对应的section的切换 需要给每个li添加一个index

            this.lis[i].setAttribute('data-index', i)

            this.lis[i].onclick = this.toggleTab

            // 4.1删除按钮点击事件

            this.removes[i].onclick = this.removeTab

            // 5.添加功能就是 对li section做操作 就不需要获取了 直接绑定双击事件

            this.spans[i].ondblclick = this.insertTab

            this.sections[i].ondblclick = this.insertTab

        }

    }

    // 2.4 给其他事件清空类名操作 因为后面可能还会用到 封装一个函数

    clearClass() {

        for (var i = 0; i < this.lis.length; i++) {

            this.lis[i].classList.remove('liactive')

            that.sections[i].classList.remove('conactive')

        }

    }

    // 切换

    toggleTab() {

        that.clearClass()

        // 2.3在这里面完成切换功能 注意当前的this为点击的这个li

        this.classList.add('liactive')

        var index = this.getAttribute('data-index')

        // 注意 这个时候不能用this 要用controcutor里面的this

        that.sections[index].classList.add('conactive')

    }

    // 新增

    addTab() {

        // 3.2点击新增就会增加一个li

        var li = '<li class="liactive"><span>新选项卡</span><span class="iconfont icon-guanbi"></span></li>'

        that.ul.insertAdjacentHTML('beforeend', li)

        // 3.3同时新增一个section

        var radom = Math.random()

        var section = '<section class="conactive">测试'+radom+'</section>'

        that.fsections.insertAdjacentHTML('beforeend', section)

        // 3.4因为新增过后就需要到新增的选项卡里面来 所以 就要重新清空类名

        that.clearClass()

        // 3.5连续点多个新增 后面新增的全是选中状态的原因 新增一次过后就要重新执行一次初始化 获到最新的li和section

        that.init()

    }

    // 删除

    removeTab(e) {

        e.stopPropagation()

        // 4.2点一次删除 就会把当前的父元素删掉

        var index = this.parentNode.getAttribute('data-index')

        this.parentNode.remove()

        // 同时把section删掉

        that.sections[index].remove()

        // 删除一个 应该跳转到前一个选项卡

        // 疑难点：这里遇到了做下来的第一个困难点 我一看代码一直在寻思没什么没问题啊 但就是不能实现点击事件 后来才发现是因为此处有个冒泡事件 先执行了那个就点击在原地两个互相作用才出现了问题 关闭冒泡事件即可

        // that.lis[index - 1].click()

        // 4.3删除到第一个会报错 这里可以利用与的短路运算 前面为true就执行后面 前面为false就执行前面

        // that.lis[index - 1] && that.lis[index - 1].click()

        // 此处还是有点小瑕疵 就是当我点击选项一的时候 我去删除选项三 删完过后 它会自动跳到选项二 正常应该保持不动就可以

        // 突然想到这里如果有jq的hasclass方法就舒服了

        if (this.parentNode.classList[0] == 'liactive') {

            that.lis[index - 1] && that.lis[index - 1].click()

        }

    }

    // 修改

    insertTab() {

        // 取消双选选中文字

        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty()

        // 5.1 双击过后把第一个span里的内容改为文本框

        var str = this.innerHTML

        this.innerHTML = '<input type=“text”>'

        // 5.2变文本框之后应该把span的值给到文本框里面

        this.children[0].value = str

        // 5.3失去焦点后 把input的值给到innerhtml     -----------------------time---------------------------

        this.children[0].onblur = function() {

            this.parentNode.innerHTML = this.value

        }

    }

}

new Tab('#tab')

不重要的css部分 可忽略

* {

    margin: 0;

    padding: 0;

}

ul li {

    list-style: none;

}

main {

    width: 960px;

    height: 500px;

    border-radius: 10px;

    margin: 50px auto;

}

main h4 {

    height: 100px;

    line-height: 100px;

    text-align: center;

}

.tabsbox {

    width: 900px;

    margin: 0 auto;

    height: 400px;

    border: 1px solid lightsalmon;

    position: relative;

}

nav ul {

    overflow: hidden;

}

nav ul li {

    float: left;

    width: 100px;

    height: 50px;

    line-height: 50px;

    text-align: center;

    border-right: 1px solid #ccc;

    position: relative;

}

nav ul li.liactive {

    border-bottom: 2px solid #fff;

    z-index: 9;

}

#tab input {

    width: 80%;

    height: 60%;

}

nav ul li span:last-child {

    position: absolute;

    user-select: none;

    font-size: 12px;

    top: -18px;

    right: 0;

    display: inline-block;

    height: 20px;

}

.tabadd {

    position: absolute;

    /* width: 100px; */

    top: 0;

    right: 0;

}

.tabadd span {

    display: block;

    width: 20px;

    height: 20px;

    line-height: 20px;

    text-align: center;

    border: 1px solid #ccc;

    float: right;

    margin: 10px;

    user-select: none;

}

.tabscon {

    width: 100%;

    height: 300px;

    position: absolute;

    padding: 30px;

    top: 50px;

    left: 0px;

    box-sizing: border-box;

    border-top: 1px solid #ccc;

}

.tabscon section,

.tabscon section.conactive {

    display: none;

    width: 100%;

    height: 100%;

}

.tabscon section.conactive {

    display: block;

}

前端—我的第一篇博客 梦开始的地方（面向对象版tab栏）的更多相关文章

  1. 我的第一篇博客。(JavaScript的声明和数据类型的一些笔记)

    这是我的第一篇博客,务必请大家多多关照. 下面是前端js的变量和数据类型的一些笔记,不是很全请多多包涵. 1.变量 变量的声明 var 变量名 变量这个容器中放的是数据 变量的赋值 变量名 = 数据 ...

  2. 第一篇博客：Hello World

    2016年10月10日,双十,好日子,决定开始写第一篇博客,标题想了会,就叫Hello World 吧,哈哈^_^. 首先感谢博客园的管理们能批准我的申请,记得在14年的时候申请过一次,竟然没申请通过 ...

  3. 我的第一篇博客 ——【ToDoList】小程序开发

    我是一只即将大四的大三狗,这是我的第一篇博客,说来惭愧.今年1月份,学校放寒假的时候开始自学的IOS,放假的时候比较起劲,看了一堆Object-C的视频,然后照着中英文对照的IOS基础开发教程,做了两 ...

  4. Hello World -- 第一篇博客

    今年注定是不寻常的一年,因为技术,接触了许多大牛.通过一篇篇博文,看到了大牛们勤奋好学.孜孜不倦的精神,于是决定也开个博客,向大牛学习. 博客开了,写点什么呢?奈何肚子里墨水不多,吐出来也多是白沫,不 ...

  5. Ginger的第一篇博客

    怀着无感的心情,没有技术的身体,写下第一篇博客作为标记. 目前应该会搞清楚数据结构上相关的操作.算法,然后用c语言实现后记录在博客. 我是有目标的咸鱼! 2019/4/19

  6. “Hello, my first blog”------第一篇博客的仪式感

    本人在校大学生一枚,开通博客,主要是想记录自己的学习过程,分享自己的学习经历.记得大一的时候,很多不懂的操作和知识,都是在博客上找到了相应的解决办法.但比较讽刺的是,很多时候,曾经解决了的问题,当再次 ...

  7. 我的第一篇博客：不用sizeof求int的bit数

    我的第一篇博客..  还不会什么高端的东西就来点基础的. 不用sizeof求int的bit数 //不用sizeof求int的bit数 #include<stdio.h> int main( ...

  8. 第一篇博客 安装open live writer

    第一篇博客安装open live writer http://openlivewriter.org/ 有的人可能会打不开,所以我准备了一个百度云的链接地址 链接:https://pan.baidu.c ...

  9. C博客作业00—我的第一篇博客

    C博客作业00-我的第一篇博客 1. 你对网络专业或者计算机专业了解是怎样? 泛泛了解 - 原先只知道网络工程隶属于计算机工程学院,与院中其他专业一样,同样都需要学习大量的计算机基础知识,然后再分支学 ...

随机推荐

  1. Apache中commons包的各种jar的功能说明

    commons-logging.jar -----记录日志,通常和  log4j.jar共同使用 commons-beanutils.jar(1.1)                主要提供Bean的 ...

  2. mac os 利用ssh 搭建git server服务器详细教程，以及git基本用法

    详细讲mac 连接mac的git操作 首先在服务端上 第一:新建一个仓库 1, cd /Users/userName/projects 用linux命令进入一个你想要创建与他人共享的文件夹. 2,su ...

  3. web虚拟主机、日志分割以及日志分析

    目录 一.构建虚拟web主机 1.1 概述 1.2 支持的虚拟主机类型 1.3 部署虚拟主机步骤 1.3.1 基于域名的虚拟主机 (1)为虚拟主机提供域名解析 (2)为虚拟主机准备网页文档 (3)添加 ...

  4. python篇第5天【变量】

    第4天加班 多个变量赋值 Python允许你同时为多个变量赋值.例如: a = b = c = 1 以上实例,创建一个整型对象,值为1,三个变量被分配到相同的内存空间上. 您也可以为多个对象指定多个变 ...

  5. 操作系统发展史 & 进程

    今日内容 UDP协议 操作系统发展史 进程 单核情况下的进程调度 进程三状态图 同步异步 阻塞非阻塞 内容详细 一.UDP协议 1.什么是UDP协议 UDP是传输层的协议,功能即为在IP的数据报服务之 ...

  6. Solution Set -「LOCAL」冲刺省选 Round XXII

    \(\mathscr{Summary}\)   和出题人很有缘分但是没有珍惜.jpg   A 题有一个显然的二维偏序斜率式,以及显然的 CDQ 套李超树 \(\mathcal O(n\log^2n)\ ...

  7. SQLMAP配置洋葱路由

    [笔者目前使用的系统是kali渗透系统] =================================================================== 首先下载tor apt ...

  8. Windows原理深入学习系列-强制完整性控制

    欢迎关注微信公众号:[信安成长计划] 0x00 目录 0x01 介绍 0x02 完整性等级 0x03 文件读取测试 0x04 进程注入测试 0x05 原理分析 Win10_x64_20H2 0x06 ...

  9. 可视化里程碑：可拖拽使用的可视化BI工具

    在数据量越来越大的今天,如何利用好数据,更好的为人类社会服务,成为人们所关心的话题,而其中数据可视化作为最后一个环节,也是人们最为直观的感受,自然而然备受重视.同质化的应用越来越多,应用开发者也开始在 ...

  10. 📚 选择排序和插入排序区别-DS笔记

    选择排序法 A[i...n)未排序,A[0...i)已排序 A[i...n]中最小值要放到A[i]的位置 复杂度 \(O(n^2)\) 第一层循环n次 第二层循环:i=0,n次:i=1,n-1次... ...