我正在尝试制作一个脚本,例如动态编辑删除 Bootstrap 选项卡。这是一个演示
var button='<button class="close" type="button" title="Remove this page">×</button>';
var tabID = 1;
function resetTab(){
var tabs=$("#tab-list li:not(:first)");
var len=1
$(tabs).each(function(k,v){
len++;
$(this).find('a').html('Tab ' + len + button);
})
tabID--;
}
$(document).ready(function() {
$('#btn-add-tab').click(function() {
tabID++;
$('#tab-list').append($('<li><a href="#tab' + tabID + '" role="tab" data-toggle="tab">Tab ' + tabID + '<button class="close" type="button" title="Remove this page">×</button></a></li>'));
$('#tab-content').append($('<div class="tab-pane fade" id="tab' + tabID + '">Tab ' + tabID + ' content</div>'));
});
$('#tab-list').on('click', '.close', function() {
var tabID = $(this).parents('a').attr('href');
$(this).parents('li').remove();
$(tabID).remove();
//display first tab
var tabFirst = $('#tab-list a:first');
resetTab();
tabFirst.tab('show');
});
var list = document.getElementById("tab-list");
});
#tab-list .close {
margin-left: 7px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<p>
<button id="btn-add-tab" type="button" class="btn btn-primary pull-right">Add Tab</button>
</p>
<!-- Nav tabs -->
<ul id="tab-list" class="nav nav-tabs" role="tablist">
<li class="active"><a href="#tab1" role="tab" data-toggle="tab">Tab 1</a></li>
</ul>
<!-- Tab panes -->
<div id="tab-content" class="tab-content">
<div class="tab-pane fade in active" id="tab1">Tab 1 content</div>
</div>
</div>
</div>
</div>
但是如何让它可以编辑呢?我想编辑标签标题和标签内容。最后如何获取输入中的输出/html源代码?
最佳答案
像这样创建一个编辑函数..
var editHandler = function() {
var t = $(this);
t.css("visibility", "hidden");
$(this).prev().attr("contenteditable", "true").focusout(function() {
$(this).removeAttr("contenteditable").off("focusout");
t.css("visibility", "visible");
});
};
然后将处理程序附加到每个新添加的选项卡中的“编辑”按钮。
$('#btn-add-tab').click(function() {
...
$(".edit").click(editHandler);
});
关于javascript - 动态添加编辑删除 Bootstrap 选项卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42735710/