具体代码:
链接:https://pan.baidu.com/s/1uY25FCHY7MnOyt3VfIlpag 密码:q1ug
功能需求:
- 点击 tab 栏,可以切换效果
- 点击 + 号,可以添加tab栏和内容项
- 点击 x 号,可以删除当前tab项和内容项
- 双击 tab 项文字或者内容项文字,可以修改里面的文字内容
功能实现思路:
1. 该对象具有切换功能
2. 该对象具有添加功能
-
创建新的选项卡 li 和新的内容 section
以前做法:动态创建元素 createElement ,但是元素里面内容较多,需要 innerHTML 赋值在 appendChild 追加到父元素里面,appendChild 不支持追加字符串的元素
现在高级做法:利用 Element.insertAdjacentHTML() 可以直接把字符串格式元素添加到父元素中,Element.insertAdjacentHTML() 支持追加字符串的元素
-
把创建的两个元素追加到对应的父元素中
-
该对象具有删除功能
-
点击 x 可以删除当前的选项卡和当前的 section
-
x 号是没有索引的,但是它的父亲的索引号正是我们想要的索引号
-
核心思路:点击x号可以删除这个索引号对应的li 和section
-
-
该对象具有修改功能
-
双击选项卡 li 或者 section 里面的文字,可以实现修改功能
-
双击事件是:ondblclick
-
如果双击文字,会默认选定文字,此时需要双击禁止选中文字
-
双击禁止选定文字,不需要背
-
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
- 核心思路:双击文字的时候,在里面生成一个文本框,当失去焦点或者按下回车后然后把文本框输入的值给原先元素即可
index.html:
<!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="firstnav">
<ul>
<li class="liactive">