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

问题描述

我是新的Bootstrap，并且似乎无法想出这一点，我有navbar被用作Bootstrap的javascript标签功能，它可以动态添加和删除导航链接，我使用图像而不是默认导航链接，我的问题是当我添加动态导航链接，它应该成为活动类，并显示其相关内容，目前我必须点击使其活动，如果我删除任何导航链接，内容是否有一种方法来实现此功能

html是：

 < ul id =nav-tabsdata-tabs =tabs> 
< li class =test>< img src =assets / img / button_home_selected3.pngclass =hoverwidth =83/>< span& < / a> < / li> 
< / ul> 
  

点击此按钮时添加标签：

 < a href =＃class =plustitle =点击添加标签>< img src =assets / img / icon_plus.png />< / a> 
  

li使用

添加

  var counter = 1; 
 $（'。plus'）。click（function（e）{
 e.preventDefault（）; 
 var li_count = $（'＃nav-tabs'）。find .test）。length; 
 if（li_count <= 3）
 if（counter< = 3）{
 $（'＃nav-tabs'）。append（'< ; li class =test>< img src =assets / img / button_home_selected3.pngclass =hoverwidth =83/>< span>首页< / span>< / a> < button type =buttonclass =close>& times;< / button>< / div>< / a>< / li>'）; 
} else {alert （Only 3 Tabs Allowed！）}; 
  

/ p>

标签中的活动类使用

切换。

  $导航标签）。on（click，a，function（e）{
 e.preventDefault（）; 
 $（this）.tab（'show'）; 
 $（'li.test'）。每个（function（）{
 if（$（this）.hasClass（'active'））
 {
 //活动类应用
 $（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在新导航链接中使用按钮关闭关闭：

  $（'。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标记。如果我是您，我会简化添加新标签页和标签内容

有一个功能创建新标签页，选项卡内容，然后使其处于活动状态。您可以使用标签（'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'）; 
 
 //创建标签内容
 $（'< div class =tab-paneid =tab' + nextTab +'> tab'+ nextTab +'content< / div>'）appendTo（'。tab-content'）; 
 
 //使新标签页处于活动状态
 $ '#tabs a：last'）。tab（'show'）; 
}）; 
  

动态Bootstrap标签演示

然后您只需要为您的图片自定义一下。

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

The html is:

<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

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


        });

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

解决方案

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...

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

Dynamic Bootstrap Tabs Demo

Then you just need to customize it a little for your images.

这篇关于显示在引导导航栏中添加时动态添加的导航链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！