在引导导航栏中添加时显示动态添加的导航链接

素材狗 2022-01-01 20:24:03 文章分类：前端问题点击数：次

文章标签

show dynamically added navlinks when added in bootstrap navbar(在引导导航栏中添加时显示动态添加的导航链接)

本文介绍了在引导导航栏中添加时显示动态添加的导航链接的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我是 Bootstrap 的新手，似乎无法弄清楚这一点，我将导航栏用作 Bootstrap 的 javascript 选项卡功能，它可以动态添加和删除导航链接，我使用的是图像而不是默认导航-links，我的问题是当我添加动态导航链接时，它应该成为活动类并显示其相关内容，此时我必须单击使其激活，如果我删除任何导航链接，内容还是一样，有没有办法实现这个功能

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

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="Q2xpY2sgdG8gYWRkIFRhYnM=" ><img src="assets/img/icon_plus.png"/></a>

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">&times;</button></div></a></li>');
                } else { alert("Only 3 Tabs Allowed!")};

选项卡的内容稍后添加类似；

The content of tabs are added similarly later;

选项卡中的活动类使用切换

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();
            }


        });

使用新导航链接中的按钮关闭关闭 li:

The li are closed using button close in the new nav-links as:

$('.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;
})

推荐答案

看起来您使用的不是标准的 Bootstrap nav/nav-tabs 标记.如果我是你，我会像这样简化添加新标签和标签内容...

It doesn't look like you're using the standard Bootstrap nav/nav-tabs markup. If I were you I would simplify adding new tabs and tab content like this...

有一个函数可以创建新标签、标签内容，然后使其处于活动状态.您可以使用 tab('show') 方法来激活新创建的选项卡:

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:

$('#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');
});