---
title: 标签页
slug: docs/cn/SHf1kNoUALvy5XxPQmt39
createdAt: 2026-06-05T14:35:37.593Z
---

[选项卡](docId:4lK3iqUD5wfhH7fLtKXOf) 可将相关内容组织到可切换的面板中。它们对于在不增加页面长度的情况下，以多种编程语言、框架、操作系统或替代工作流呈现示例非常有用。

## 语法

您可以使用 Markdown 或 MDX 添加此组件。

::::Tabs
:::Tab{title="Markdown"}
```markdown
:::::Tabs
::::Tab{title="Tab Name"}
Content here.
::::
:::::
```
:::

:::Tab{title="MDX"}
```javascript
<Tabs>
  <Tab title="Tab Name">
    Content here.
  </Tab>
</Tabs>
```
:::
::::

每个 `标签页` 元素都需要一个 `标题` 属性，该属性将作为选项卡标签显示。您可以在选项卡内放置任何受支持的 Markdown 或 MDX 内容，包括文本、图像、表格、代码块以及其他组件。

## MDX 示例

以下示例创建了三个选项卡，包含不同编程语言的等效代码示例。

````javascript
<Tabs>
  <Tab title="JavaScript">

  ```javascript
  const greeting = 'Hello, world!'
  console.log(greeting)
  ```

  </Tab>
  <Tab title="Python">

  ```python
  greeting = "Hello, world!"
  print(greeting)
  ```

  </Tab>
  <Tab title="Go">

  ```go
  package main

  import "fmt"

  func main() {
      fmt.Println("Hello, world!")
  }
  ```

  </Tab>
</Tabs>
````