只是作为一次demo的记录
<!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>选项卡练习</title>
<link rel="stylesheet" href="./bootstrap/3.3.7/css/bootstrap.min.css">
<script src="./jquery/jquery.js"></script>
<script src="./bootstrap/3.3.7/js/bootstrap.js"></script>
<style>
.nav-tabs a {
display: inline-block !important;
}
.nav-tabs .tab-del {
cursor: pointer;
margin-left: 10px;
font-size: 15px;
}
</style>
</head>
<body>
<h1>选项卡</h1>
<ul class="nav nav-tabs">
<li class="active">
<a href="#tab-a-pane" data-toggle="tab">tab-a
<i title="移除" class="glyphicon glyphicon-remove tab-del"></i>
</a>
</li>
<li>
<a href="#tab-b-pane" data-toggle="tab">tab-0
<i title="移除" class="glyphicon glyphicon-remove tab-del"></i>
</a>
</li>
<li class="add-tab">
<a href="" data-toggle="tab">
<i class="glyphicon glyphicon-plus"></i>
</a>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="tab-a-pane">
<p>这是tab-a的内容</p>
</div>
<div class="tab-pane fade" id="tab-b-pane">
<p>这是tab-b的内容</p>
</div>
</div>
<script>
$(document).ready(function () {
$(document).on('click', '.add-tab', function () {
var timetemp = new Date().getTime();
var tabId = 'tab-' + timetemp + '-pane';
var liStr = `<li>
<a href="#` + tabId + `" data-toggle="tab">tab-` + timetemp +
`<i title="移除" class="glyphicon glyphicon-remove tab-del"></i></a>
</li>`;
var divStr = `<div class="tab-pane fade" id="` + tabId + `">
<p>这是tab-` + tabId +
`的内容</p>
</div>`;
// 添加到选项卡标题
$(this).before(liStr);
$('#myTabContent').append(divStr);
$('.nav a[href="#' + tabId + '"]').tab('show');
});
$(document).on('click', '.tab-del', function (e) {
e.stopPropagation();
var tabId = $(this).parent().attr('href');
tabId = tabId.replace('#', '');
if ($(this).parents('li').hasClass('active')) {
if ($(this).parents('li').prev().length > 0) {
$(this).parents('li').prev().find('a').tab('show');
} else {
$(this).parents('li').next().find('a').tab('show');
}
}
$('#' + tabId + '').remove();
$(this).parents('li').remove();
});
// 阻止时间冒泡
function stopBundle(e) {
if (e && e.stopPropagation) { // 非IE
e.stopPropagation();
} else { // IE
window.event.cancelBubble = true;
}
}
});
</script>
</body>
</html>
网友评论