这是我的第一篇博客 博客生涯才开始 但是人生已经过去了二十个年头了 才开始弄这个 也没搞得太懂 我原本的想法是想搞个源代码上来 但是看了半天好像就只能传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. Serializable接口中serialVersionUID字段的作用

    序列化运行时使用一个称为 serialVersionUID 的版本号与每个可序列化类相关联,该序列号在反序列化过程中用于验证序列化对象的发送者和接收者是否为该对象加载了与序列化兼容的类. 如果接收者加 ...

  2. 关于unix下cp命令复制权限不够的问题

    例如要将mysql-5.7.17-macos10.12-x86_64.tar.gz 拷贝到/usr/local目录下时,执行cp mysql-5.7.17-macos10.12-x86_64.tar. ...

  3. ios 类别和扩展-赵小波

    类别 @interface ClassName ( CategoryName ) // method declarations @end Category在iOS开发中使用非常频繁.尤其是在为系统类进 ...

  4. CSS多种方式实现元素水平垂直居中

    html结构: <div class="center">确定宽高水平垂直居中</div> <div class="center2" ...

  5. 2021羊城杯比赛复现（Crypto）

    bigrsa 题目: from Crypto.Util.number import * from flag import * n1 = 10383529640908175186077053551474 ...

  6. Solution -「JOISC 2020」「UOJ #509」迷路的猫

    \(\mathcal{Decription}\)   Link.   这是一道通信题.   给定一个 \(n\) 个点 \(m\) 条边的连通无向图与两个限制 \(A,B\).   程序 Anthon ...

  7. [Matlab]二维隐函数绘图

    MATLAB提供了一个ezplot函数绘制隐函数图形,有三种调用方式: 对于函数f=f(x),ezplot函数的调用格式为: ezplot(f):在默认区间-2pi<=x<=2pi内绘制f ...

  8. 带你玩转CompletableFuture异步编程

    前言 最近在忙生活的第一个OKR,这个等等后面具体聊聊,今天开始恢复每周一篇原创,感谢小伙伴的不离不弃.这篇文章也是最近在Code Review的时候,看到的大家代码,想整体推下大家异步编程的思想,由 ...

  9. Excel制作图表太单调了，用哪些可视化分析工具？

    ​那么在如今"颜值为王"的现在,如何将数据展现得更好看,让别人更愿意看,这也是一个技术活.好比公司领导让你对某一个项目得研究成果做汇报,那么你不可能给他看单纯的数据一样,你需要让数 ...

  10. 【C#单元测试】 开篇

    官方:https://docs.microsoft.com/zh-cn/visualstudio/test/install-third-party-unit-test-frameworks?view= ...