如何用单个按钮切换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
相关产品推荐
相关产品推荐

