本文展示了如何使用原生JavaScript、HTML和CSS创建一个可添加、删除和修改内容的Web选项卡。通过点击加号添加新选项，点击标签上的叉号删除选项，双击标签可编辑其内容。提供了完整的HTML结构、CSS样式和JavaScript代码示例。
话不多说，先上图：
当点击右侧的加号，会自动动态创建新的一个选项，如下图：
当点击标签右上角的叉号，会删除选项栏：
双击tab栏某一选项栏，可以更改选项栏的内容，如下图：
接下来废话不多说了，上源码：
htnl机构：
<!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>tab栏切换</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.fence {
margin: 100px auto;
width: 1000px;
height: 300px;
/* background-color: pink; */
border: 1px solid #ccc;
}
.tab {
list-style: none;
/* background-color: yellow; */
height: 40px;
line-height: 40px;
text-align: center;
}
.tab li {
position: relative;
height: 100%;
float: left;
width: 100px;
border: 1px solid red;
border-collapse: collapse;
cursor: p
最低0.47元/天 解锁文章
扫一扫
1153
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
