Framework7学习笔记之 Tab标签页

<!-- Tabs容器, 需要带有"tabs"类。必需元素 -->
<div class="tabs">
  <!-- 第一个tab, 需要带有"tab"类和唯一的id -->
  <!-- 激活状态，通过添加"active"类实现 -->
  <div class="tab active" id="tab1">
    ... Tab 1 页内容 ...
  </div>
  <!-- 第二个tab, 需要带有"tab"类和唯一的id -->
  <div class="tab" id="tab2">
    ... Tab 2 页内容
  </div>
  <!-- 第三个tab, 需要带有"tab"类和唯一的id -->
  <div class="tab" id="tab3">
    ... Tab 3 页内容 ...
  </div>
</div>

<!-- 关联到第一个标签, 需要设置和第一个标签id名相同的href属性(tab1) -->
<a href="#tab1" class="tab-link active">Tab 1</a>
<!-- 关联到第二个标签, 需要设置和第二个标签id名相同的href属性(tab2) -->
<a href="#tab2" class="tab-link">Tab 2</a>
<!-- 关联到第三个标签, 需要设置和第三个标签id名相同的href属性(tab3) -->
<a href="#tab3" class="tab-link">Tab 3</a>

       <!-- Tabs动画 -->
      <div class="tabs-animated-wrap">
    
        <div class="tabs">
        
          <div id="tab1" class="tab active">
            ... Tab 1 content ...
          </div>
        
          <div id="tab2" class="tab">
            ... Tab 2 content ...
          </div>
     
          <div id="tab3" class="tab">
            ... Tab 3 content ...
          </div>
        </div>
      </div>

<!-- 1:将tabs容器和views容器合并在一起 -->
<div class="views tabs toolbar-fixed">

  <!-- 2:定义tab，它是一个view -->
  <div id="tab1" class="view tab active">
    <div class="navbar">
      <div class="navbar-inner">
        <div class="center">导航栏</div>
      </div>
    </div>
    <div class="pages navbar-fixed">
      <div data-page="页面" class="page">
        <div class="page-content">
              页面内容。。。
        </div>
      </div>
    </div>
  </div>
  ......

  <!-- 3:定义tab标签栏：在底部工具栏中定义标签栏 -->
  <div class="toolbar tabbar">
    <div class="toolbar-inner">
      <a href="#tab1" class="tab-link active"><i class="icon demo-icon-1"></i></a>
      <a href="#tab2" class="tab-link"><i class="icon demo-icon-2"></i></a>
      <a href="#tab3" class="tab-link"><i class="icon demo-icon-3"></i></a>
    </div>
  </div>
</div>

<div class="tabs-swipeable-wrap">