我建立了一些功能,允许用户添加和删除选项卡。“添加”功能按我希望的方式工作,只有5个标签可见,其余的将显示在下拉列表中。见jsfiddle
添加“删除”功能时,我遇到一些问题。选项卡已被正确删除,但是现在可以解决以下问题:
如果我添加了6个以上的标签(例如12个),并且单击了按钮以删除当前选择的标签(有效),则在第一个下拉元素上设置了“ .active”类,使其无法单击?我尝试了以下方法:
$('.dropdown ul #tab6').parent().removeClass('active');
我真的很坚持,所以任何帮助将不胜感激。
编辑:
我已经意识到,选项卡的ID无关紧要,只要它们是唯一的即可。我已经更新了小提琴,它添加了一个简单的.each()来更新选项卡选择中的文本。
当我从下拉菜单中删除标签页时,仍然存在选择第一个下拉菜单的问题,有人可以帮忙吗?
另一种方法。它应该是您要寻找的。
HTML(稍作修改)
<script id="tabTemp" type="text/x-jquery-tmpl">
<div class='tab-pane' id='tab${device}'>
This is device number <span class="dev-nr"></span>
<p>Random string (to see tabs difference): <b>${randomStr}</b></p>
<div>
<a href="#" class="btn btn-danger btn-remove btnRmv">Remove device</a>
</div>
</div>
</script>
<script id="navTemp" type="text/x-jquery-tmpl">
<li class="li-tab-toggle">
<a href="#tab${device}" class="tab-toggle" data-toggle="tab">
Device <span class="dev-nr"></span>
</a>
</li>
</script>
<script id="dropTemp" type="text/x-jquery-tmpl">
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">
More Devices <b class="caret"></b>
</a>
<ul class="dropdown-menu" id="drop"></ul>
</li>
</script>
<a href="#" class="btn btn-primary" id="btnAdd">Add device</a>
<ul class="nav nav-tabs" id="tabs">
<li class="li-tab-toggle active"><a class="tab-toggle" href="#tab1" data-toggle="tab">Device 1</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">Device 1 content</div>
</div>
脚本:
var maxTabs = 4, index = 1;
$('#btnAdd').click(function(e){
e.preventDefault();
index++;
$('.tab-toggle').length !== maxTabs ||
$('#tabs').append($.tmpl(dropTemp))
.find('#drop').append($('.li-tab-toggle:last').removeClass('active'));
$.tmpl(navTemp, {"device" : index}).insertAfter('.li-tab-toggle:last');
$.tmpl(tabTemp, {"device" : index}).appendTo('.tab-content');
$('.li-tab-toggle:last a').tab('show');
updateTabs();
});
$(document).on('click', '.btnRmv', function(e){
var tabs = $('.li-tab-toggle').length,
nav = $('.li-tab-toggle.active');
nav.parent('#tabs').find('#drop li:first').insertBefore('#tabs .dropdown');
tabs !== maxTabs+1 || $('#drop li').insertBefore('#tabs .dropdown').siblings('.dropdown').remove();
$('a', nav.is('li:last') ? nav.prev() : nav.next()).tab('show');
nav.add($('a', nav).attr('href')).remove();
updateTabs();
});
function updateTabs(){
for(var i=0; i < $('.tab-toggle').length; i++){
$('.tab-toggle:eq('+i+') .dev-nr, .tab-pane:eq('+i+') .dev-nr').text(i+1);
}
}
还有一点美化版本
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句