Es6面向对象实现TEB切换栏有添加修改删除功能

最新推荐文章于 2022-10-20 22:24:00 发布
最新推荐文章于 2022-10-20 22:24:00 发布
阅读量134 收藏
点赞数
文章标签： css html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61842089/article/details/120816786
版权

HTML部分

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

       

        .box {

            width: 800px;

            height: 600px;

            border: solid 1px;

            margin: 0 auto;

        }

       

        .tobu {

            width: 100%;

            overflow: hidden;

            background-color: brown;

        }

       

        ul li {

            list-style: none;

            float: left;

        }

       

        li {

            width: 60px;

            background-color: chartreuse;

        }

       

        p {

            display: none;

        }

       

        .btn {

            float: right;

        }

       

        input {

            width: 30px;

        }

    </style>

</head>

<body>

    <div class="box">

        <div class="tobu">

            <ul>

                <li>

                    <span>测试1</span>

                    <button>删除</button>

                </li>

                <li>

                    <span>测试1</span>

                    <button>删除</button>

                </li>

                <li>

                    <span>测试1</span>

                    <button>删除</button>

                </li>

            </ul>

            <button class="btn">添加</button>

        </div>

        <div class="tobu2">

            <p>我是第一个盒子</p>

            <p>我是第二个盒子</p>

            <p>我是第三个盒子</p>

        </div>

    </div>

</body>

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

</html>

JS部分

var tach;

class TEB {

    constructor(clss) {

            tach = this;

            this.main = document.querySelector(clss);

            this.btn = this.main.querySelector(".btn")

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

            this.PP = this.main.querySelector('.box .tobu2')

            this.getqeury();

            this.shij()

        }

        //更新获取元素

    getqeury() {

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

            this.P = this.main.querySelectorAll('p');

            this.btnn = this.main.querySelectorAll("ul li button");

            this.span = this.main.querySelectorAll("ul li span")

        }

        //添加事件

    shij() {

            tach.getqeury();

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

                this.lis[i].index = i;

                this.lis[i].onclick = this.qiehuan;

                tach.btnn[i].onclick = this.shanchu;

                this.span[i].ondblclick = this.xiugai;

                this.P[i].ondblclick = this.xiugai;

            }

            tach.btn.onclick = this.tianjia;

        }

        //切换功能

    qiehuan() {

            tach.forr();

            tach.lis[this.index].style.backgroundColor = "red";

            tach.P[this.index].style.display = "block";

        }

        //去异

    forr() {

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

                tach.P[i].style.display = "";

                tach.lis[i].style.backgroundColor = "";

            }

        }

        //添加

    tianjia() {

            tach.qiehuan

            var li = "<li><span>测试</span><button>删除</button></li>";

            var ps = "<p>我是新加的盒子盒子</p>";

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

            tach.PP.insertAdjacentHTML('beforeend', ps)

            tach.shij();

        }

        //删除

    shanchu() {

            tach.shij();

            tach.forr()

            var index = this.parentNode.index;

            tach.lis[index].remove();

            tach.P[index].remove();

            index--;

            //tach.lis[index].onclick = this.shij();

        }

        //修改

    xiugai() {

        // window.Geolocation ? window.Geolocation().removeAllRanges() : document.getSelection.empty();

        var ht = this.innerHTML;

        this.innerHTML = '<input type="text">';

        var input = this.children[0];

        input.value = ht;

        input.select();

        input.onblur = function() {

            this.parentNode.innerHTML = this.value;

        };

        input.onkeyup = function(e) {

            if (e.keyCode == 13) {

                this.blur();

            }

        }





 

    }

}

new TEB(".box")

社会你雨哥
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ES6高级-面向对象版Tab栏切换
qq_43781887的博客
07-23 378
4）以前的做法是动态创建元素createElement，但是元素里面内容较多，需要innerHTML赋值，在appendChild追加到父元素里面。（4）核心思路双击文字的时候，在里面生成一个文本框，当失去焦点或者按下回车然后把文本框输入的值给原先的元素即可。（6）appendChild不支持追加字符串的子元素，insertAdjacentHTML支持追加字符串的元素。（2）x是没有索引号的，但是它的父亲li有索引号，这个索引号正是我们想要的索引号。（3）第二步把创建的两个元素追加到对应的父元素中。...
ES6学习
qq_41547609的博客
11-29 1264
1 ES6 新特性 1.1 let 关键字 let 关键字用来声明变量，使用 let 声明的变量有几个特点： 不允许重复声明； 块级作用域（局部变量）； 不存在变量提升； 不影响作用域链； let创建变量代码示例： // let关键字使用示例： let a; // 单个声明 let b,c,d; // 批量声明 let e = 100; // 单个声明并赋值 let f = 521, g = 'iloveyou', h = []; // 批量声明并赋值 块级作用域 不仅仅指花括号{}，还有if
html+css实战123-综合案例-导航
geyaoisnice的博客
06-16 249
html
b站pink老师JavaScript的ES6面向对象案例代码——面向对象版Tab栏切换
最新发布
weixin_72322475的博客
10-20 893
b站pink老师JavaScript的ES6面向对象案例代码——面向对象版Tab栏切换。本文代码解决了原代码中的2个BUG。【BUG1：如果直接删除第一个选项卡li,后面的选项卡不会被选中】【BUG2：如果input文本框为空，则无法再双击出现文本框】
ES6面向对象版Tab栏切换
雷加祥的博客
05-11 598
主要功能包括 tab栏切换 增加删除tab栏 双击可以修改tab栏的文字 双击可以修改文本内容 * { margin: 0; padding: 0; } ul li { list-style: none; } input{ height: 25px; } .tabsbox { width: 800px; height: 400px; border: 1px solid #
面向对象tab栏切换、添加、删除、编辑.mp4
10-28
通过使用ES6中新增的class类实现tab标签栏，标签栏的添加，可以动态的在界面中新增一个标签栏，同时也可以删除tab标签栏,修改tab标签栏，切换tab标签栏。
模拟浏览器网页顶部切换栏 (ES6面向对象版本)
06-19
在本文中，我们将深入探讨如何使用ES6的面向对象特性来模拟浏览器网页顶部的切换栏。...通过这种方式，我们利用ES6的面向对象特性，实现了模块化和易于维护的代码，有效地模拟了浏览器顶部的选项卡切换功能。
ES6学习笔记（三）：教你用js面向对象思维来实现 tab栏增删改查功能
01-08
在本篇《ES6学习笔记（三）：教你用js面向对象思维来实现tab栏增删改查功能》中，作者深入探讨了如何利用JavaScript的ES6特性，特别是面向对象编程，来构建一个具备增、删、改、查功能的tab栏组件。以下是详细的知识...
ES6实现图片切换特效代码
10-15
在本文中，我们将深入探讨如何使用ES6语法来实现一个图片切换特效。这个特效通过创建一个动态展示的图片列表，使用户能够轻松地浏览和切换不同的图片。代码示例展示了如何利用JavaScript和CSS来实现这一功能，使得...
teb选项卡菜单
04-21
teb可选项卡式菜单，方便网页内容的填充
ES6 对象的新功能与解构赋值介绍
10-17
本文将深入探讨ES6对象的新功能和解构赋值。 一、字面量语法扩展 在ES6中，对象字面量语法得到了显著增强，使得创建和操作对象更加简便。例如，可以使用简写属性名称，将变量名直接作为属性名，省略冒号和等号： ...
面向对象写tab切换（四）
HAI6545的博客
01-04 148
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> .tab{ width: 600px; height: 300px; border:1px solid #000; margin: 50px auto; } ..
teb切换（鼠标放上）
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
04-22 539
&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;tab切换jquery代码&lt;/title&gt;&lt;script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"&g
vue-router 路由
weixin_46146313的博客
05-12 288
当应用变得复杂以后，我们就需要通过一种便捷、高效的方式来管理应用，最常见的就是通过路由 路由：把 url 与 应用中的对应的组件进行关联，通过不同的url访问不同的组件， 当页面简丹如teb切换还是使用组件 前后端路由的区别:后端路由是在分发网络资源，vue前段切换的页面交互内容 新建项目时不要自定义 选择Manually-> 选择Babel（es6的编译）和Router标星号 ->use history mode for router（是否使用历史记录 选择是） ->分来放是还放一起(选
Tab栏切换
qq_61838861的博客
02-06 7836
1.将tab栏分为上下两部分，上面是导航栏，下面是各部分对应的内容。 2.tab栏导航栏部分，点击后样式改变，比如字体颜色、背景颜色改变 ①定义一个类名：current，改变后的样式，先给第一个写该类名，其他的不写类名 ②js获取所有对象，利用for循环遍历给每个对象绑定点击事件,并且设置属性index ③排他算法：利用for循环将所有对象设置类名为空，被点击的对象设置类名current 3.点击不同对象，出现不同的内容 ①定义一个类名：items，其他的都隐藏起来 ②获取全部对象，获取点击对象的索
indigo版本teb_local_planner常见编译问题
m0_59781323的博客
04-26 370
项目场景： Teb局部路径规划器的indigo版本在编译时可能会遇到如下编译报错情况 问题描述 提示：/home/ros/catkin_ws/data/huang/my_ws/src/teb_local_planner-indigo-devel/src/optimal_planner.cpp:155:64: error: no matching function for call to ‘g2o::BlockSolver<g2o::BlockSolverTraits<-1, -1>
【已解决】error: no matching function for call to ‘g2o::BlockSolver...
Bungehurst
10-12 5663
问题描述： error: no matching function for call to ‘g2o::BlockSolver<g2o::BlockSolverTraits<-1, -1> >::BlockSolver(roborts_local_planner::TebLinearSolver*&)’ TebBlockSolver* blockSolver = new TebBlockSolver(linearSolver); ... ... error: no ma
teb切换栏
m0_61842089的博客
10-06 137
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <titl...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值