JavaScript面向对象怎样删除标签页?

　　单击小标签右上角的按钮可D头删除标签页。其开发思路是，为“x”元素绑定单击事件，事件触发后，通过父元素1i获取索弓引值，然后用这个索引值将对应的li和section删除，并在删除后更新标签页的选中效电下面我们们就开始进行代码编写。

　　(1)在udeatNode()方法中获取所有的“x”元素，具体代码如下。

　　(2) 在init()方法的for循环中，为每个“x”元素绑定单击事件。

　　在上述代码中，第4行代码将触发事件的对象this和事件对象e传给removeTab0方法。

　　(3)编写removeTab0事件，实现标签页的删除，具体代码如下。

　　在上述代码中，由于“x”元素是小标签li元素的子元素，当“x”被单击时，会发生冒泡，导致li的单击事件也触发，所以需要通过第2行代码阻止事件冒泡。

　　(4)在删除了li和section元素以后，还需要更新标签页的选中状态。有两种情况，一种是删除了当前正在显示的标签页，删除以后，就把上一个标签页设为选中状态;另-种情况是删除了一个没有打开的标签页，这个时候原来的选中状态应该保持不变。为了区分这两种状态，可以在删除了标签页以后，判断当前是否存在已被打开的标签页，如果不存在，说明删除的是已被打开的标签页，就把上- -个标签页设为选中状态即可，具体代码如下。

　　在上述代码中，第3行代码用来判断main元素中是否有已被打开的标签页，如果没有，则执行if中的代码。第4行代码用来将上一个标签页设为选中状态，在设置前，先判断是否存在上一个标签页，以避免全部关闭的时候程序出错。

　　(5)通过浏览器访问测试，观察删除标签页功能是否已经实现。

JavaScript面向对象怎样删除标签页?相关推荐

JavaScript文件下载不跳标签页。支持get、post
利用表单提交方式, downloadFile(url, method, params) {if (!document.getElementById("myIframe")) {le ...
JavaScript面向对象—— 动态创建tab标签页
昨天呢,介绍了js中类的概念,以及使用类创建对象的过程.今天就用js中的类实现一个小的功能,动态添加.删除标签页.emmmmm,也有点像tab栏切换,不过比tab栏切换多了添加和删除的功能. 案例说明 ...
百度Sugar BI 数据可视化里的标签页组件如何实现
百度Sugar BI 标签页组件可方便用户在一个页面中对多个报表页面进行集中查看.标签页组件通过配置选项卡切换,满足企业人员在业务工作中,对业务平级内容的收纳与展示. Sugar BI支持用户自定义设 ...
JavaScript面向对象修改标签页详解
双击标签页组件中的li小标签或者section 中的文本,可以对文本进行编辑.为了实现这个功能,需要先给li和section元素绑定双击事件,当双击文本后,将文本改成一个文本框,用来输入新的内容,在文 ...
删除360浏览器新标签页内的热词导航
在360 浏览器的新标签页中,点击搜索栏经常弹出各种广告文字为了删除这些内容,只要更改一下360浏览器安装根目录内的 newpages.zip 压缩包里 "new_page.html&qu ...
《JavaScript面向对象编程指南》—第128页错误指正
最近在阅读<JavaScript面向对象编程指南第2版>,感觉很有帮助.今晚发现一个小错误,想指正一下. 如图,书中第128页: 书中的第三个例子代码如下: "potato&qu ...
php表格js特效,JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
本文实例讲述了JavaScript表格隔行变色和Tab标签页特效.分享给大家供大家参考,具体如下: 最近一直在看JavaScript知识,偶尔也穿插一点Jquery,感觉Jquery用起来真爽,减少了 ...
JavaScript 实现标签页切换效果
JavaScript 实现标签页切换效果构建主体界面 HTML 代码 <h1>实现标签页的切换效果</h1> <ul id="tab">& ...
前端基础之《Bootstrap（13）—JavaScript插件_标签页、工具提示、弹出框、折叠效果和幻灯片》
一.data-开头的是什么是bootstrap封装的js. data-toggle data-target data-dismiss data-spy 参考资料:https://blog.csdn. ...

JavaScript面向对象怎样删除标签页?

JavaScript面向对象怎样删除标签页?相关推荐

最新文章

热门文章