底部带标签的工具栏与视图的关联

     底部带标签的工具栏需要配合标签页使用，标签用于控制不同内容区的切换显示。
标签页的布局：

<!-- Tabs容器, 需要带有"tabs"类。必需元素 --><div class="tabs">  <!-- 第一个tab, 需要带有"tab"类和唯一的id -->  <!-- 第一个tab默认是激活显示状态，通过添加"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>

标签页间的切换：
完成标签组件HTML布局后，我们需要控件，以便用户可以在各标签间切换。
我们需要创建链接（< a >标签），它拥有名为”tab-link”的类，并且href属性值和目标标签页的id相同：

<!-- 关联到第一个标签, 需要设置和第一个标签id名相同的href属性(tab1) active表明激活的卡项--><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>