Bootstrap技術: 如何給nav導航組件的tab頁增長關閉按鈕以及動態的添加和關閉tab頁

先給出示例html代碼

<div>
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist" id="contentnavid">
    <li role="presentation" class="active"><a href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab">tab1</a></li>
    <li role="presentation"><a href="#tab2" aria-controls="tab2" role="tab" data-toggle="tab">tab2</a></li>
    <li role="presentation"><a href="#tab3" aria-controls="tab3" role="tab" data-toggle="tab">tab3</a></li>
    <li role="presentation" id="closetabli"><a href="#closetab" aria-controls="closetab" role="tab" data-toggle="tab"><span>closetab</span>
    &nbsp;<button type="button" class="close"  aria-label="Close" id="closetabbtn"><span aria-hidden="true" style="color:red">&times;</span></button>
    </a></li>
  </ul>
  
  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="tab1">this is tab1</div>
    <div role="tabpanel" class="tab-pane active" id="tab2">this is tab2</div>
    <div role="tabpanel" class="tab-pane active" id="tab3">this is tab3</div>
    <div role="tabpanel" class="tab-pane active" id="closetab">this is closetab</div>
  </div>      
</div>

上面的html代碼中，顯示的導航組件有4個tab頁，其中最後一個tab頁的標籤的右邊有一個 x 的關閉按鈕。

下面咱們要實現就是當點擊x關閉按鈕時，能夠把這個帶關閉按鈕的tab隱藏掉，並顯示最近一次顯示的tab頁。

具體示例代碼以下：

<script>
    var activeTab = "tab1"; //當前的tab頁。默認爲第一個tab頁。
    var previousTab;  //上一個打開的tab頁。默認爲空。
    $(function(){
        //實現事件響應函數，當tab頁被顯示時會觸發
        $(‘a[data-toggle="tab"]‘).on(‘shown.bs.tab‘, function (e) {
            //獲取當前被顯示的tab頁標籤的aria-controls屬性值
            activeTab = $(e.target).attr("aria-controls");
            //獲取前一個被顯示的tab頁標籤的aria-controls屬性值
            previousTab = $(e.relatedTarget).attr("aria-controls");
        });
        
        //點擊帶關閉按鈕tab頁標籤上的x後的響應事件
        $("#closetabbtn").click(function(e){
            $(this).parent().parent().css("display","none"); //隱藏tab頭，調用remove方法就是刪除了
            $("#closetab").css("display","none"); //隱藏tab正文信息，調用remove方法就是刪除了
            if(activeTab=="closetab"){ //判斷當前tab頁是不是帶關閉按鈕的tab頁，若是是，則顯示上次打開的tab頁
                $(‘#contentnavid a[href="#‘+previousTab+‘"]‘).tab(‘show‘); //顯示tab頁
            }        
            return false; //必定要return false，阻止事件往上冒泡
        });
    });
</script>

上面給出了js代碼。

本文給出了最核心的處理邏輯，其中關鍵的地方有：

1）增長關閉按鈕，並處理click事件

2）處理tab的show事件

在此基礎上，能夠實現各類場景下的應用。