[英]show dynamically added navlinks when added in bootstrap navbar
I am new to Bootstrap, and can't seem to figure this out, i have navbar being used as javascript tab functionality of Bootstrap, which can have dynamically added and removeable nav-links, i have used images rather than default nav-links, my question is when i add the dynamic nav-link, it should become the active class and show its relevant content, at the moment i have to click to make it active, and if i remove any nav-link, the content remains same, is there a way to achieve this function我是 Bootstrap 的新手,似乎无法弄清楚这一点,我将导航栏用作 Bootstrap 的 javascript 选项卡功能,它可以动态添加和可删除的导航链接,我使用的是图像而不是默认的导航链接,我的问题是当我添加动态导航链接时,它应该成为活动类并显示其相关内容,此时我必须单击以使其处于活动状态,如果我删除任何导航链接,内容保持不变,有没有办法实现这个功能
The html is: html是:
<ul id="nav-tabs" data-tabs="tabs" >
<li class="test" ><img src="assets/img/button_home_selected3.png" class="hover" width="83" /><span>Home</span></a> </li>
</ul>
The tabs are added when this button is clicked:单击此按钮时会添加选项卡:
<a href="#" class="plus" title="Click to add Tabs" ><img src="assets/img/icon_plus.png"/></a>
The li are added using使用 li 添加
var counter = 1;
$('.plus').click(function(e) {
e.preventDefault();
var li_count = $('#nav-tabs').find("li.test").length;
if (li_count <= 3)
if(counter <= 3){
$('#nav-tabs').append('<li class="test" ><img src="assets/img/button_home_selected3.png" class="hover" width="83" /><span>Home</span></a><button type="button" class="close">×</button></div></a></li>');
} else { alert("Only 3 Tabs Allowed!")};
The content of tabs are added similarly later; tab的内容后面类似添加;
The active class in tabs is toggled using选项卡中的活动类使用切换
$("#nav-tabs").on("click", "a", function(e) {
e.preventDefault();
$(this).tab('show');
$('li.test').each(function() {
if($(this).hasClass('active'))
{
//Active class is applied
$(this).children().children().closest("img").attr("src", "assets/img/button_home_selected3.png");
$(this).find("button").show();
}
else
{
$(this).children().children().closest("img").attr("src", "assets/img/button_home_plain2.png");
$(this).find("button").hide();
}
});
The li are closed using button close in the new nav-links as: li 使用新导航链接中的关闭按钮关闭,如下所示:
$('.close').click(function(e) {
e.preventDefault();
var panelId = $(this).closest("li").remove().attr("aria-controls");
$("#tab" + panelId).remove();
$("#nav-tabs").children("li").last().addClass("active");
if(counter <= 1){
counter = 1;
}else if (counter > 1) {
counter--;
}
return false;
})
It doesn't look like you're using the standard Bootstrap nav/nav-tabs markup.看起来您没有使用标准的 Bootstrap 导航/导航标签标记。 If I were you I would simplify adding new tabs and tab content like this...
如果我是你,我会像这样简化添加新标签和标签内容......
Have a single function that creates the new tab, tab content and then makes it active.有一个创建新选项卡、选项卡内容然后使其处于活动状态的功能。 You can use the
tab('show')
method to activate the newly created tab:您可以使用
tab('show')
方法来激活新创建的选项卡:
$('#btnAdd').click(function (e) {
var nextTab = $('#tabs li').size()+1;
// create the tab
$('<li><a href="#tab'+nextTab+'" data-toggle="tab">Tab '+nextTab+'</a></li>').appendTo('#tabs');
// create the tab content
$('<div class="tab-pane" id="tab'+nextTab+'">tab' +nextTab+' content</div>').appendTo('.tab-content');
// make the new tab active
$('#tabs a:last').tab('show');
});
Then you just need to customize it a little for your images.然后你只需要为你的图像定制一点。
如果您想通过双击或带有特殊的X图标来关闭选项卡,我该怎么办?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.