『前端学习实例』标签页的动态增删改（Javascript + Bootstrap）

最新推荐文章于 2022-08-07 21:29:53 发布

大熊软糖M

最新推荐文章于 2022-08-07 21:29:53 发布

阅读量697

点赞数 1

分类专栏：前端学习实例文章标签： javascript

本文链接：https://blog.csdn.net/GLZX_HM/article/details/107596687

版权

这篇博客介绍如何利用JavaScript和Bootstrap实现动态标签页功能，包括动态添加、删除、编辑和切换标签页。详细讲解了功能需求和实现步骤，并提供了源代码示例。

摘要由CSDN通过智能技术生成

参考文档：JavaScript 教程 W3school

参考视频：【极客学院】一周学会Bootstrap

官方文档： Bootstrap 中文文档 · Bootstrap 是世界上最流行的、移动设备优先的、响应式前端开发框架。

功能需求

实现动态标签页，包含一系列按钮和文本。

切换功能：点击按钮可以切换到相应文本。（使用bootstrap的js标签页）
添加功能：可以动态添加新的按钮和文本。（使用按钮监听器，DOM添加节点和属性）
删除功能：可以删除指定按钮和对应文本。（使用按钮onclick属性，DOM删除节点）
编辑功能：可以编辑按钮和文本内容。（使用HTML5的contenteditable属性）

结果展示

初始状态：
切换功能（点击按钮）：
可编辑功能（点击编辑）：
添加功能（单击最右侧Add按钮）：
删除功能（单击S3右侧的关闭按钮）：

源代码

文件目录

index.html 网页源代码
mycss.css 样式源代码
myjs.js 脚本源代码

文件夹

css/
bootstrap.css bootstrap样式
js/
bootstrap.js bootstrap脚本
jquery-3.5.1.js bootstrap依赖库

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>动态标签页</title>
  <!--引入bootstrap中的css样式和js脚本，以及js依赖的jquery-->
  <link rel="stylesheet" href="css/bootstrap.css">
  <script src="js/jquery-3.5.1.js"></script>
  <script src="js/bootstrap.js"></script>
  <!--引入css-->
  <link rel="stylesheet" type="text/css" href="mycss.css">
</head>

<body>


<div class="container mid">

  <!-- Nav tabs -->
  <ul class="nav nav-tabs nav-pills xx" role="tablist" id="u1">
    <button type="button" class="btn-toolbar btn-lg" data-dismiss="alert" id="b1">
      <span aria-hidden="true" class="glyphicon glyphicon-plus">
      </span>Add
    </button>
    <li role="presentation" id=&