回到所有的课程
课程库

选项卡

使用Tabs元素向Webflow项目添加响应式的、带有标签的内容。

本视频采用了旧的用户界面。更新版本即将到来!

在这节课中:

  1. 添加标签
  2. 向选项卡添加内容
  3. 风格的标签

添加标签

标签图标缩略图

要添加tabs元素,请转到添加面板向下滚动到组件部分。然后单击并拖动选项卡元素将其放置在画布上。它将自动填充所放置元素的宽度。

组件部分中包含的11个元素是背景

解剖学的标签

选项卡元素由标签包装,里面有选项卡菜单标签内容

Tabs内容在Navigator面板中高亮显示。选项卡菜单显示选项卡链接和面板。

选项卡菜单

选项卡菜单包含所有选项卡链接。默认情况下,有三个选项卡链接。在每个标签链接中都有一个Text块。

标签内容

嵌套在选项卡内容中的是选项卡窗格,每个选项卡的内容都保存在其中。默认情况下,有三个窗格(与数字按钮匹配)。

创建一个标签

默认情况下,有三个选项卡。你可以通过以下步骤添加更多信息:

  1. 选择tab中的任何元素
  2. 元素设置面板
  3. 选项卡设置单击加上图标

创建新选项卡时,会在正确的位置自动创建选项卡链接和选项卡窗格。

删除标签

  1. 选择tab中的任何元素
  2. 元素设置面板
  3. 找到选项卡设置部分
  4. 单击垃圾图标在你想要删除的标签旁边

如果您删除一个标签链接,相应的标签窗格也将被删除,反之亦然。

重命名选项卡

在选项卡设置中,还可以为内部组织重命名选项卡(这不会重命名画布上的选项卡)。

切换标签

有几种方法可以切换到不同的选项卡:

  • 选择选项卡设置活动选项卡列表。注意:当网站加载时,这也会设置默认选项卡
  • 在Navigator中选择要查看的选项卡
  • 在画布上选择一个选项卡窗格,并使用键盘上的左右箭头选择相邻的选项卡窗格
选项卡设置面板显示了四个选项来设置为活动选项卡,以及一个插件图标来添加另一个选项卡。面板还显示了一个宽松的下拉菜单和渐隐和渐隐的文本输入字段。

向选项卡添加内容

切换到选项卡后,你可以用以下两种方式在选项卡窗格中添加元素:

  • 选择选项卡窗格后,单击Add面板中的元素以立即插入它们
  • 从Add面板中拖放元素到选项卡面板中
左边的第一步,选择您想要添加元素的选项卡窗格。在右边的第二步,从添加面板中选择元素选项卡,并添加您选择的元素。

您还可以预览每个选项卡的内容预览模式然后点击每个选项卡按钮。

风格的标签

您可以设置选项卡组件中的每个元素的样式。

选项卡菜单

您可以通过首先在画布上或从Navigator中选择选项卡菜单,然后转到样式面板来设置选项卡菜单的样式。例如,您可以选择添加底部空白来在选项卡和选项卡窗格内的内容之间创建空间。

左边的第一步,选择tabs菜单。在右边的第二步,在样式面板的间距部分添加边距。

标签链接

首先,选择一个选项卡链接,并创建一个新类。然后将这个类名添加到所有其他标签链接,使它们共享相同的样式。这个绿色的当前的类在站点上选择一个选项卡时自动应用。

样式面板显示一个选项卡链接,该类Current被添加到默认的选项卡链接类中。

一旦所有选项卡链接具有相同的类名,选择一个不包含Current类的选项卡链接。您可以样式其中一个标签链接和更改将应用到所有它们。例如,可以编辑字体颜色、字体大小和背景颜色。

在左边的第一步,选择一个选项卡链接,并确保Current类不是活动的。步骤二在中间,编辑字体和字体大小。第三步在右边,编辑标签的背景。

样式化当前选项卡链接

您可以选择使当前选项卡的样式与普通选项卡不同,以区分活动选项卡和非活动选项卡。例如,可以编辑字体颜色和背景颜色,使其与普通选项卡不同。要设置当前选项卡的样式,只需选择活动选项卡链接。

显示一组名为月度计划(已选)、年度计划和百周年计划的选项卡。

标签链接的悬停样式

你可以通过以下步骤为标签链接添加悬停效果:

  1. 选择一个不是当前的标签链接
  2. 选择徘徊下拉菜单
  3. 样式标签,您希望他们出现在悬停
  4. 选择没有一个来自美国
  5. 在样式面板中添加一个过渡与所需的缓和和持续时间
左边的第一步,选择Annual Plans选项卡。步骤二在右边,选择悬停(高亮显示)在状态下拉菜单。

转换

要控制不同选项卡窗格之间的转换:

  1. 选择任意一个选项卡元素
  2. 元素设置面板
  3. 选择放松缓解方法下拉
  4. 设置渐入渐出持续时间(ms)
左边的第一步,从导航器面板中选择tabs菜单。在右边的步骤二,编辑标签设置面板中的Easing。一个
尝试Webflow——它是免费的
Baidu
map