Bootstrap3で動的タブを使用する


デモ


HTML

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap3.3.7で動的タブを使用するサンプル</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
</head>
<body>
  <div class="container">
    <h1>Bootstrap3.3.7 動的タブ</h1>
    <ul class="nav nav-tabs" id="tabs" role="tablist">
      <!--
      <li>
       <a href="#tab1" role="tab" data-toggle="tab">
         Tab 1&nbsp;
         <button type="button" class="close" aria-label="Close" title="タブを閉じる">
           <span aria-hidden="true">&#215;</span>
           <span class="sr-only">タブを閉じる</span>
         </button>
       </a>
     </li>
      -->
      <li id="tab-add">
        <a href="#tab-add-content" role="tab" title="タブを追加">
          <span class="glyphicon glyphicon-plus"></span>
          <span class="sr-only">タブを追加</span>
        </a>
      </li>
    </ul>
    <div class="tab-content">
      <!--
      <div class="tab-pane" id="tab1">tab1 content</div>
      -->
      <div class="tab-pane active" id="tab-add-content">
        ↑タブを追加するには上の「 <span class="glyphicon glyphicon-plus"></span> 」アイコンをクリックして下さい
      </div>
    </div>
  </div><!-- /.container -->
  <script src="https://code.jquery.com/jquery-3.1.0.slim.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script>
  (function($) {
    'use strict';
    $('#tabs').on('click', ' #tab-add', function(e) { //< タブ追加ボタンクリック
      var nextTab = $('#tabs li').length;
      $('#tab-add').before(
        '<li><a style="display:inline-block;" href="#tab' + nextTab + '" role="tab" data-toggle="tab">Tab '
        + nextTab + '&nbsp;</a></li>'
      );
      $('#tab-add-content').before('<div class="tab-pane" id="tab' + nextTab + '">tab' + nextTab + ' content</div>');
      $('#tabs li:nth-last-child(2) a').tab('show');
    }).on('click', ' li a .close', function() { //< 閉じるボタンクリック
      var tabLi = $(this).parents('li');
      var tabId = tabLi.children('a').attr('href');
      if (tabLi.hasClass('active')) {
        if (tabLi.next().attr('id') === 'tab-add') {
          tabLi.prev().children('a').tab('show');
        } else {
          tabLi.next().children('a').tab('show');
        }
      }
      // タブ削除
      tabLi.remove('li');
      $(tabId).remove();
    }).on('shown.bs.tab', ' a[data-toggle="tab"]', function(e) { //< タブ切り替えイベント
      // 以前のアクティブタブの閉じるボタンを削除
      $(e.relatedTarget).children('.close').remove();
      // アクティブタブに閉じるボタンを付与
      $(e.target).append(
        '<button type="button" class="close" aria-label="Close" title="タブを閉じる" style="font-size:20px">'
        + '<span aria-hidden="true">&#215;</span><span class="sr-only">タブを閉じる</span>'
        + '</button>'
      );
    });
  })(jQuery);
  </script>
</body>
</html>