2

私は Bootstrap を初めて使用し、これを理解できないようです。Bootstrap の JavaScript タブ機能として navbar を使用しています。これには、動的に追加および削除可能な nav リンクを含めることができます。デフォルトの nav リンクではなく画像を使用しました。私の質問は、動的ナビゲーション リンクを追加すると、アクティブなクラスになり、関連するコンテンツが表示されるはずです。現時点では、クリックしてアクティブにする必要があります。ナビゲーション リンクを削除しても、コンテンツは同じままです。この機能を達成する方法はありますか

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>

このボタンをクリックすると、タブが追加されます。

<a href="#" class="plus" title="Click to add Tabs" ><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!")};

タブの内容は後で同様に追加されます。

タブ内のアクティブなクラスは、次を使用して切り替えられます

$("#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 は、次のように新しいナビゲーション リンクの閉じるボタンを使用して閉じられます。

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

1 に答える 1

0

標準の Bootstrap nav/nav-tabs マークアップを使用しているようには見えません。私があなただったら、このように新しいタブとタブのコンテンツを簡単に追加できます...

新しいタブ、タブのコンテンツを作成してアクティブにする単一の関数を用意します。メソッドを使用して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');
});

動的ブートストラップ タブのデモ

次に、画像に合わせて少しカスタマイズするだけです。

于 2013-05-18T13:27:59.207 に答える