使用
Bootstrap 实现
Tab 标签页切换和添加内容信息以 iframe 的形式呈现，需要做如下步骤：
1.创建 HTML 文件，引入
Bootstrap 和 jQuery 库，以及一个用于显示
Tab 标签页的容器和多个
Tab 标签页。
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
Tab Demo</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/
bootstrap/3.3.7/css/
bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/
bootstrap/3.3.7/js/
bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<ul class="nav nav-
tabs">
<li class="active"><a href="#
tab1" data-toggle="
tab">
Tab 1</a></li>
<li><a href="#
tab2" data-toggle="
tab">
Tab 2</a></li>
<li><a href="#
tab3" data-toggle="
tab">
Tab 3</a></li>
<li><a href="#" data-toggle="modal" data-target="#myModal">添加</a></li>
</ul>
<div class="
tab-content">
<div class="
tab-pane active" id="
tab1">
<iframe src="https://www.baidu.com"></iframe>
</div>
<div class="
tab-pane" id="
tab2">
<iframe src="https://www.sina.com.cn"></iframe>
</div>
<div class="
tab-pane" id="
tab3">
<iframe src="https://www.qq.com"></iframe>
</div>
</div>
</div>
<!-- 模态框 -->
<div class="modal fade" id="myModal"
tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">添加
标签页</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="
tabName">
标签名</label>
<input type="text" class="form-control" id="
tabName" placeholder="请输入
标签名">
</div>
<div class="form-group">
<label for="
tabUrl">链接地址</label>
<input type="text" class="form-control" id="
tabUrl" placeholder="请输入链接地址">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" id="add
TabBtn">添加</button>
</div>
</div>
</div>
</div>
<script>
$(function() {
// 添加
标签页
$('#add
TabBtn').click(function() {
var
tabName = $('#
tabName').val();
var
tabUrl = $('#
tabUrl').val();
if (
tabName &&
tabUrl) {
// 生成新
标签页的 HTML 代码
var
tabHtml = '<li><a href="#' +
tabName + '" data-toggle="
tab">' +
tabName + '</a></li>';
var contentHtml = '<div class="
tab-pane" id="' +
tabName + '"><iframe src="' +
tabUrl + '"></iframe></div>';
// 添加新
标签页和内容
$('.nav-
tabs').append(
tabHtml);
$('.
tab-content').append(contentHtml);
// 关闭模态框
$('#myModal').modal('hide');
}
});
// 显示第一个
标签页
$('.nav-
tabs a:first').
tab('show');
});
</script>
</body>
</html>
```
2.在
Tab 标签页中使用 iframe
标签来显示内容信息。
3.在添加按钮中使用
Bootstrap 的模态框组件来显示一个表单，以便用户输入新的
标签页名称和链接地址。
4.在 JavaScript 中处理添加
标签页的逻辑。当用户点击添加按钮时，获取表单中的
标签页名称和链接地址，生成新的
Tab 标签页的 HTML 代码，并将新的
标签页和内容添加到
页面中。
通过以上步骤，我们就可以使用
Bootstrap 实现
Tab 标签页切换和添加内容信息以 iframe 的形式呈现。用户可以通过点击
标签页来切换内容，也可以通过添加按钮来添加新的
标签页。
扫一扫
123
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
