Forece Blog

Forece Blog

Bootstrap 双 Tab 标签效果

最近有个前端需求,需要做双Tab,国外管双标签效果叫 Nested Tab。搜了下 Bootstrap3 和 Bootstrap4 的双 Tab 效果,感觉还可以,记录一下。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
    <title>Document</title>
  </head>
  <body>
    <div class="tabbable boxed parentTabs p-4">
      <ul class="nav nav-tabs">
        <li class="active"><a href="#set1" class="nav-link">Set1</a></li>
        <li><a href="#set2" class="nav-link">Set2</a></li>
      </ul>
      <div class="tab-content">
        <div class="tab-pane fade show active" id="set1">
          <div class="tabbable">
            <ul class="nav nav-tabs">
              <li class="active"><a href="#sub11" class="nav-link">Set1-Tab1</a></li>
              <li><a href="#sub12" class="nav-link">Set1-Tab2</a></li>
              <li><a href="#sub13" class="nav-link">Set1-Tab3</a></li>
            </ul>
            <div class="tab-content">
              <div class="tab-pane fade show active" id="sub11">
                <p>Tab1 Content</p>
              </div>
              <div class="tab-pane fade" id="sub12">
                <p>Tab2 Content</p>
              </div>
              <div class="tab-pane fade" id="sub13">
                <p>Tab3 Content</p>
              </div>
            </div>
          </div>
        </div>
        <div class="tab-pane fade" id="set2">
          <div class="tabbable">
            <ul class="nav nav-tabs">
              <li class="active"><a href="#sub21" class="nav-link">Set2-Tab1</a></li>
              <li><a href="#sub22" class="nav-link">Set2-Tab2</a></li>
            </ul>
            <div class="tab-content">
              <div class="tab-pane fade active in" id="sub21">
                <p>Set2-Tab1-Content</p>
              </div>
              <div class="tab-pane fade" id="sub22">
                <p>Set2-Tab2-Content</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script>
      $("ul.nav-tabs a").click(function (e) {
        e.preventDefault();
        $(this).tab("show");
      });
    </script>
  </body>
</html>

Bootstrap3 双 Tabs 效果

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
        <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        
        <script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <ul class="nav nav-pills" id="myTab">
            <li class="active"><a href="#divstyle" data-toggle="tab">风格设置</a></li>
            <li><a href="#divmystyle" data-toggle="tab">自定义风格</a></li>
            <li><a href="#divbanshi" data-toggle="tab">版式设置</a></li>
        </ul>
        <div class="tab-content">
          <!--1-->
          <div class="tab-pane active" id="divstyle">
              <div class="tabbable" style="margin: 3px;">
                  <ul class="nav nav-pills" id="divstyletab">
                      <li class="active"><a href="#tab11" data-toggle="tab">最近</a></li>
                      <li><a href="#tab12" data-toggle="tab">人文</a></li>
                      <li><a href="#tab13" data-toggle="tab">人文</a></li>
                  </ul>
                  <div class="tab-content">
                      <!-- 第一个tab -->
                      <div class="tab-pane fade active in" id="tab11">
                          a
                      </div>
                      <!-- 第二个tab -->
                      <div class="tab-pane fade" id="tab12">
                          b
                      </div>
                      <!-- 第三个tab -->
                      <div class="tab-pane fade" id="tab13">
                          c
                      </div>
                      <!-- 中间图表结束 -->
                  </div>
              </div>
          </div>
          <!-- 2 -->
          <div class="tab-pane" id="divmystyle">
              <div class="tabbable" style="margin: 3px;">
                  <ul class="nav nav-pills" id="divstyletab">
                      <li class="active"><a href="#tab21" data-toggle="tab">最近</a></li>
                      <li><a href="#tab22" data-toggle="tab">人文</a></li>
                      <li><a href="#tab23" data-toggle="tab">人文</a></li>
                  </ul>
                  <div class="tab-content">
                      <!-- 第一个tab -->
                      <div class="tab-pane fade active in" id="tab21">
                          aa
                      </div>
                      <!-- 第二个tab -->
                      <div class="tab-pane fade" id="tab22">
                          bb
                      </div>
                      <!-- 第三个tab -->
                      <div class="tab-pane fade" id="tab23">
                          cc
                      </div>
                      <!-- 中间图表结束 -->
                  </div>
              </div>
          </div>
          <!-- 3 -->
          <div class="tab-pane" id="divbanshi">
              <div class="tabbable" style="margin: 3px;">
                  <ul class="nav nav-pills" id="divstyletab">
                      <li class="active"><a href="#tab31" data-toggle="tab">最近</a></li>
                      <li><a href="#tab32" data-toggle="tab">人文</a></li>
                      <li><a href="#tab33" data-toggle="tab">人文</a></li>
                  </ul>
                  <div class="tab-content">
                      <!-- 第一个tab -->
                      <div class="tab-pane fade active in" id="tab31">
                          aaa
                      </div>
                      <!-- 第二个tab -->
                      <div class="tab-pane fade" id="tab32">
                          bbb
                      </div>
                      <!-- 第三个tab -->
                      <div class="tab-pane fade" id="tab33">
                          ccc
                      </div>
                      <!-- 中间图表结束 -->
                  </div>
              </div>
          </div>
          <!-- tab end -->
      </div>
      <script type="text/javascript">
          $(function() {
            $('#myTab a').click(function(e) {
                e.preventDefault();
                $(this).tab('show');
            });
            $('#divstyletab a').click(function(e) {
                e.preventDefault();
                $(this).tab('show');
            });
      </script>
    </body>
</html>

相关文章:

发表评论:

您的电子邮箱地址不会被公开。 必填项已用*标注