python測試開發django-153.bootstrap導航-標簽頁切換(nav-tabs)

前言

Bootstrap 中的導航組件都依賴同一個 .nav 類，狀態類也是共用的。標簽頁.nav-tabs 類依賴 .nav 基類。

tab標簽頁

在標簽 ul 添加 nav 和 nav-tabs 屬性,將應用Bootstrap標簽樣式。
在li 里面 a 標簽上簡單的指定 data-toggle="tab" 或 data-toggle="pill"，就可以完成一個標簽導航頁

<ul id="tabs" class="nav nav-tabs">
      <li><a href="#config"  data-toggle="tab">配置</a></li>
      <li><a href="#operate" data-toggle="tab">操作</a></li>
      <li><a href="#setting" data-toggle="tab">設置</a></li>
    </ul>

頁面效果

可以給第一個li設置一個class屬性active來激活第一個標簽頁

<ul id="tabs" class="nav nav-tabs">
      <li class="active"><a href="#config"  data-toggle="tab">配置</a></li>
      <li><a href="#operate" data-toggle="tab">操作</a></li>
      <li><a href="#setting" data-toggle="tab">設置</a></li>
    </ul>

標簽面板區

面板區容器要求帶"tab-content"類名，下面的每個面板都要求帶"tab-pane"類名
通過id="config"屬性關聯到導航頁上的a標簽href="#config"
默認設置第一頁激活(active)

    <ul id="tabs" class="nav nav-tabs">
      <li class="active"><a href="#config"  data-toggle="tab">配置</a></li>
      <li><a href="#operate" data-toggle="tab">操作</a></li>
      <li><a href="#setting" data-toggle="tab">設置</a></li>
    </ul>
    
    <div class="tab-content">
        <div class="tab-pane active" id="config">
            <h1>配置頁面</h1>
        </div>
        <div class="tab-pane" id="operate">
            <h1>操作頁面</h1>
        </div>
        <div class="tab-pane" id="setting">
            <h1>設置頁面</h1>
        </div>
    </div>

頁面效果

點擊其它標簽可以切換

通過 JavaScript

通過JavaScript啟用可切換標簽 (每個標簽都需要單獨激活):

$('#tabs a').click(function (e) {
  e.preventDefault();
  $(this).tab('show');
})

多種激活方式

$('#tabs a[href="#config"]').tab('show'); // 通過名字選擇
$('#tabs a:first').tab('show'); // 選擇第一個標簽
$('#tabs a:last').tab('show'); // 擇最后一個標簽
$('#tabs li:eq(2) a').tab('show'); // 選擇第三個標簽

使用示例

<script>
  $(function () {
    $('#tabs a:last').tab('show'); //初始化激活最后一個
  })
  $('#tabs a').click(function (e) {
  e.preventDefault(); //阻止a標簽點擊跳轉鏈接
  $(this).tab('show'); //顯示當前選中的鏈接及關聯的content
})
</script>

如果使用javascript實現這種導航內容的切換，a標簽中無須再添加data-toggle='tab'或data-toggle="pill"，如果每個a鏈接都使用了此屬性，那就用不到javascript了。

淡入淡出效果fade

要使選項卡淡入，請添加.fade到每個.tab-pane. 第一個選項卡窗格還必須.in使初始內容可見。

<div class="tab-content">
        <div class="tab-pane fade in active" id="config">
            <h1>配置頁面</h1>
        </div>
        <div class="tab-pane fade" id="operate">
            <h1>操作頁面</h1>
        </div>
        <div class="tab-pane fade" id="setting">
            <h1>設置頁面</h1>
        </div>
    </div>

其它方法和活動參考https://v3.bootcss.com/javascript/#tabs