如何在Quarto仪表盘中实现多页面标签同步？

要实现Quarto仪表盘的跨页面标签同步，我们可以通过JavaScript监听标签切换事件并利用浏览器本地存储（localStorage）共享状态来实现。以下是完整的实现代码和说明：

完整可复现代码 #

---
title: "test"
format: dashboard
editor: visual
---

# Page 1

```{r setup, include=FALSE}
library(ggplot2)
library(purrr)

# 全局定义标签内容，两个页面共用
example_list <- list(
  tab1 = list(test1.1 = ggplot(iris, aes(x = Sepal.Length, y = Sepal.Width))+
                geom_point(),
              test1.2 = ggplot(iris, aes(x = Petal.Length, y = Sepal.Width))+
                geom_point()),
  tab2 = list(test2 = ggplot(mtcars, aes(x = mpg, y = qsec))+
                geom_point() +
                facet_wrap(~carb, ncol = 1))
)

# 修改标签生成函数，为每个标签添加唯一ID
nested_tabs <- function(nested_list) {
  main_tab <- names(nested_list)
  cat(':::: {.panel-tabset} \n') # 主标签容器
  for (i in main_tab) {
    # 为主标签内容区域添加ID：main-tab-{标签名}
    cat(sprintf("## %s {#main-tab-%s}\n\n", i, i))
    cat("::: {.panel-tabset} \n\n") # 子标签容器
    purrr::iwalk(nested_list[[i]], ~ { 
      # 为子标签内容区域添加ID：sub-tab-{主标签名}-{子标签名}
      cat(sprintf('### %s {#sub-tab-%s-%s}\n\n', .y, i, .y))
      print(.x)
      cat('\n\n')
    })
    cat("\n:::\n\n")
  }
  cat("::::")
}  

#| results: asis
#| echo: false
#| message: false
#| warning: false
#| fig-width: 14
#| fig-height: 20  
nested_tabs(example_list)    

#| results: asis
#| echo: false
#| message: false
#| warning: false
#| fig-width: 14
#| fig-height: 20  
nested_tabs(example_list)    

<script>
// 保存当前激活的标签状态到localStorage
function saveTabState() {
  const activeMainTab = document.querySelector('.panel-tabset > .nav-tabs .nav-link.active');
  let mainTabName = '';
  let subTabName = '';
  
  if (activeMainTab) {
    // 提取主标签名称
    mainTabName = activeMainTab.getAttribute('href').replace('#main-tab-', '');
    // 提取当前主标签下激活的子标签名称
    const activeSubTab = document.querySelector(`#main-tab-${mainTabName} .panel-tabset > .nav-tabs .nav-link.active`);
    if (activeSubTab) {
      subTabName = activeSubTab.getAttribute('href').replace(`#sub-tab-${mainTabName}-`, '');
    }
  }
  
  localStorage.setItem('dashboardActiveMainTab', mainTabName);
  localStorage.setItem('dashboardActiveSubTab', subTabName);
}

// 从localStorage恢复标签状态
function restoreTabState() {
  const mainTabName = localStorage.getItem('dashboardActiveMainTab');
  const subTabName = localStorage.getItem('dashboardActiveSubTab');
  
  if (mainTabName) {
    // 切换到对应的主标签
    const mainTabLink = document.querySelector(`.panel-tabset > .nav-tabs .nav-link[href="#main-tab-${mainTabName}"]`);
    if (mainTabLink) {
      mainTabLink.click();
      // 延迟切换子标签，确保主标签内容加载完成
      setTimeout(() => {
        if (subTabName) {
          const subTabLink = document.querySelector(`#main-tab-${mainTabName} .panel-tabset > .nav-tabs .nav-link[href="#sub-tab-${mainTabName}-${subTabName}"]`);
          if (subTabLink) {
            subTabLink.click();
          }
        }
      }, 100);
    }
  }
}

// 页面加载完成后自动恢复标签状态
document.addEventListener('DOMContentLoaded', restoreTabState);

// 监听所有标签点击事件，实时保存状态
document.addEventListener('click', function(e) {
  if (e.target.classList.contains('nav-link')) {
    setTimeout(saveTabState, 50);
  }
});
</script>

实现原理 #

1. 标签ID标记：修改nested_tabs函数，为主标签和子标签的内容区域添加唯一ID，确保JavaScript能准确定位到对应的标签切换按钮。
2. 状态存储：每次切换标签时，将当前激活的主标签和子标签名称保存到浏览器的localStorage中（该存储在同一浏览器的同一域名下跨页面共享）。
3. 状态恢复：页面加载完成后，从localStorage读取之前保存的标签状态，自动触发对应标签的点击事件，实现同步切换。

注意事项 #

• 确保所有页面的标签结构完全一致（主标签、子标签的名称和层级必须相同），否则同步会失效。
• 依赖浏览器的localStorage，若用户清空浏览器存储，同步状态会丢失，这是前端跨页面状态同步的常规限制。

内容的提问来源于stack exchange，提问作者Quinten