Foundation 选项卡

选项卡是现代网页设计中非常常见的UI元素。Foundation作为一个功能强大的前端框架，提供了丰富的选项卡组件，可以轻松地实现选项卡功能，并且允许自定义选项卡的样式、行为和事件。

使用选项卡组件

Foundation中提供了多种选项卡组件，包括垂直选项卡、水平选项卡、手风琴选项卡等。使用选项卡组件非常简单，只需要按照以下步骤操作：

引入Foundation库和jQuery库。

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.css">
  <script src="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>

创建选项卡HTML结构。

<ul class="tabs" data-tabs id="example-tabs">
  <li class="tabs-title is-active"><a href="#panel1" aria-selected="true">选项卡1</a></li>
  <li class="tabs-title"><a href="#panel2">选项卡2</a></li>
  <li class="tabs-title"><a href="#panel3">选项卡3</a></li>
</ul>
<div class="tabs-content" data-tabs-content="example-tabs">
  <div class="tabs-panel is-active" id="panel1">
    <p>选项卡1的内容</p>
  </div>
  <div class="tabs-panel" id="panel2">
    <p>选项卡2的内容</p>
  </div>
  <div class="tabs-panel" id="panel3">
    <p>选项卡3的内容</p>
  </div>
</div>

初始化选项卡组件。

$(document).foundation(); // 初始化Foundation组件

这样就可以创建一个水平选项卡组件，用户点击选项卡标题，对应的面板内容就会显示出来。同时，选项卡组件还提供了诸如事件监听、自定义样式等功能，可以更加灵活地满足设计需求。

自定义选项卡样式

选项卡组件在默认情况下，可能无法与设计需求完全一致，因此需要进行一些样式的自定义。Foundation的选项卡组件使用BEM（Block Element Modifier）命名规范，可以轻松地通过自定义CSS样式修改选项卡的外观和行为。

例如，可以通过修改颜色和边框等CSS样式，实现选项卡的自定义图标和背景颜色：

.tabs-title {
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 0;
  padding: 0;
}
.tabs-title.is-active a::before {
  content: "\f118";
  font-family: FontAwesome;
  margin-right: 10px;
}

这样，选项卡标题的背景颜色变成灰色、加上圆角边框，同时选项卡标题的选中状态添加一个FontAwesome的图标。通过自定义CSS样式，可以轻松地实现选项卡的各种需求。

选项卡组件事件监听

选项卡组件支持多种事件监听，可以在相应的事件发生时执行JS逻辑代码。常用的事件包括：

初始化（ init.zf.tabs）——选项卡组件初始化完成时触发；
切换（ change.zf.tabs）——用户在选项卡之间切换时触发；
打开（ opened.zf.tabs）——选项卡内容面板打开时触发；
关闭（ closed.zf.tabs）——选项卡内容面板关闭时触发。

通过监听选项卡组件的事件，可以实现更加复杂的功能，例如在选项卡内容面板打开时，执行异步加载并渲染面板内的数据等。

结论

Foundation选项卡组件是一款功能强大的前端UI组件，可以帮助开发者轻松地实现选项卡功能，并且提供了丰富的自定义样式和事件监听等功能。使用选项卡组件时，需要注意选项卡的HTML结构和命名规范，并且遵循良好的CSS编写规范。

Foundation 进度条 Foundation 面板