---
url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/layout/tabs-element'
title: '添加选项卡面板 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:19:57+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: '当您希望将多个相关内容块放在一处、一次只显示一个时，请使用 Tabs。最后会得到一行选项卡标签；访客点击标签查看其内容。本例构建每项服务一个选项卡的代理页面。对于问答，折叠面板通常读起来更好。'
tags:
  - Lay-out
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T09:09:48+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 添加选项卡面板
      description: '当您希望将多个相关内容块放在一处、一次只显示一个时，请使用 Tabs。最后会得到一行选项卡标签；访客点击标签查看其内容。本例构建每项服务一个选项卡的代理页面。对于问答，折叠面板通常读起来更好。'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T08:19:57+0000'
      dateModified: '2026-10-24T09:09:48+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/layout/tabs-element'
      articleSection: Lay-out
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/layout/tabs-element'
      description: '当您希望将多个相关内容块放在一处、一次只显示一个时，请使用 Tabs。最后会得到一行选项卡标签；访客点击标签查看其内容。本例构建每项服务一个选项卡的代理页面。对于问答，折叠面板通常读起来更好。'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: 首页
            item: 'https://dxpr.com/zh-hans'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: zh-hans
---
[Help Center](/zh-hans/node/75)/[Documentation](/zh-hans/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Add content](/hc/documentation/learn-dxpr-builder/elements) /[Lay-out](/hc/documentation/learn-dxpr-builder/layout/overview) # 添加选项卡面板.

 Learn DXPR BuilderBuild pagesAdd contentLay-out

   ## In this guide

 Related guides

- [添加折叠面板](/zh-hans/hc/documentation/learn-dxpr-builder/layout/collapsibles-element)
- [添加轮播布局](/zh-hans/hc/documentation/learn-dxpr-builder/layout/carousel-layout)
- [添加嵌套布局](/zh-hans/hc/documentation/learn-dxpr-builder/layout/nesting)

当您希望将多个相关内容块放在一处、一次只显示一个时，请使用 Tabs。最后会得到一行选项卡标签；访客点击标签查看其内容。本例构建每项服务一个选项卡的代理页面。对于问答，[折叠面板](/zh-hans/hc/documentation/learn-dxpr-builder/layout/collapsibles-element)通常读起来更好。

## 添加选项卡面板

1. 悬停列并点击 **+** 在其控制栏中，或 **+** 在空白列中间，以打开元素选择器。
2. 在 **Layout** 选项卡，点击 **Tabs**。元素出现时带有一个选项卡，标记为 **Title**.
3. 悬停选项卡面板并打开 **More > Settings**。在以下位置输入名称 **Tab title** 并点击 **Save**.
4. 点击 **+** 在面板内以添加内容，例如 **Text** 元素。
5. 要添加选项卡，悬停选项卡标签并点击 **Add tab**：**Tabs** 控制栏。新选项卡落在最前面，为其命名并以同样方式填充。

  ## 您会看到的内容

一排选项卡标签位于打开选项卡的内容上方。在预览和已发布页面上，点击标签显示该选项卡的内容并隐藏其余。每个选项卡有自己的元素，因此一个选项卡可带文本，另一个带一组卡片。屏幕窄于 768 像素时选项卡变成如折叠面板打开的堆叠标题。

## 设置选项卡

该 **Tabs** 元素有三个设置。从以下位置打开它们 **More > Settings**：**Tabs** 控制栏，悬停选项卡标签时出现。

| 设置 | 它的作用 | 默认值 |
|---|---|---|
| **Tab direction** | 标签位置：**默认值** （内容上方），**Left** 或 **Right** | 默认值 |
| **Style** | 标签外观：**默认值** （标签下方有一条线），**Modern** （圆角卡片）或 **Accordion** （带分隔线的标题） | 默认值 |
| **Mobile friendly** | 屏幕窄于 768 像素时将选项卡显示为折叠标题 | On |

每个选项卡在以下位置有自己的设置 **More > Settings** 在其面板上。**Tab title** 是标签文本。**Tab description** 是打开选项卡标签下方的可选短行。

## 管理选项卡

- **Reorder**：将选项卡标签拖到标签中的新位置。其内容随之移动。
- **Rename**：悬停选项卡的面板，打开 **More > Settings**，更改 **Tab title** 并点击 **Save**.
- **Remove**：悬停选项卡的面板，打开 **More** 并选择 **Delete**。选项卡内的所有内容随之移除。

标签保持一到三个词，选项卡保持五个左右，以便标签排在一行。

## 如果您看不到它

- **新选项卡在首而非在末。** **Add tab** 始终将新选项卡放在最前面。将其标签拖到想要的位置。
- **设置仅显示 Tab title 和 Tab description。** 您打开了一个选项卡的设置。悬停选项卡标签以便 **Tabs** 控制栏出现，然后打开 **More > Settings** 那里。
- **手机上显示堆叠标题而非选项卡。** **Mobile friendly** 已打开，这是默认值。在以下位置关闭它 **Tabs** 在每种屏幕宽度保持选项卡的设置。
- **Tabs 在选择器的 Layout 选项卡中缺失。** DXPR Builder 用户资料省略它。管理员勾选 **Tabs** 在 **Elements** 在您的资料中，位于 `/admin/dxpr_studio/dxpr_builder/profile`.

## 接下来做什么？

- [添加折叠面板](/zh-hans/hc/documentation/learn-dxpr-builder/layout/collapsibles-element)：堆叠一次打开一对的问题和答案。
- [添加轮播布局](/zh-hans/hc/documentation/learn-dxpr-builder/layout/carousel-layout)：将同类内容逐张轮播显示。
- [嵌套](/zh-hans/hc/documentation/learn-dxpr-builder/layout/nesting)：将行和列放入选项卡中以获得更丰富的布局。