You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何用单个按钮切换Quarto文档中所有.panel-tabset标签页?

实现Quarto面板标签集的全局切换按钮

要给所有.panel-tabset添加全局切换R/Python标签的功能,只需在文档中加入自定义按钮和JavaScript代码即可,完整示例如下:

---
title: Panel tabset
---

<!-- 全局切换按钮 -->
<div style="margin: 1em 0;">
  <button id="switch-to-r" style="padding: 0.5em 1em; margin-right: 0.5em; cursor: pointer;">切换到所有R标签</button>
  <button id="switch-to-python" style="padding: 0.5em 1em; cursor: pointer;">切换到所有Python标签</button>
</div>

First example:

::: {.panel-tabset}
# R
```{r}
2 + 2
Python
2 + 2

:::

Second example:

::: {.panel-tabset}

R
1 + 2
Python
1 + 2

:::

### 关键说明
- 按钮部分:通过简单的HTML和内联样式创建两个切换按钮,可根据需要调整样式(比如改成符合文档主题的样式)。
- JavaScript脚本:
  1. 等待DOM加载完成后执行,确保能找到所有面板元素。
  2. 遍历页面上所有`.panel-tabset`容器,找到对应语言的标签按钮并触发点击事件。
  3. 给当前激活的切换按钮添加背景色,方便用户识别当前选中的语言模式。
- 注意:如果你的标签标题不是严格的“R”或“Python”,需要修改脚本中`contains("R")`和`contains("Python")`里的文本,匹配实际的标签名称。

内容的提问来源于stack exchange,提问作者Vincent
相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.14 21:37:18