如何在Shiny模块中检测激活标签页？现有JS方案失效求助

方案一：利用Shiny原生功能（推荐） #

Shiny的tabsetPanel在设置id后，会自动生成对应的input$id响应式变量，其值就是当前激活标签页的value属性值，无需额外编写JavaScript代码。

修改后的完整代码 #

library(shiny)

mod_ui <- function(id) {
  ns <- NS(id)
  
  tagList(
    tabsetPanel(
      id = ns("module_tabs"),
      tabPanel("Tab 1", value = "tab1"),
      tabPanel("Tab 2", value = "tab2"),
      tabPanel("Tab 3", value = "tab3"),
      tabPanel("Tab 4", value = "tab4")
    )
  )
}

mod_server <- function(id) {
  moduleServer(id, function(input, output, session) {
    # 监听激活的标签页并输出到控制台
    active_tab <- reactive({
      req(input$module_tabs)
      cat("R console - Active tab:", input$module_tabs, "\n")
      input$module_tabs
    })
    
    # 返回激活标签页的响应式对象
    return(active_tab)
  })
}

ui <- fluidPage(
  mod_ui("demo_module")
)

server <- function(input, output, session) {
  # 调用模块并获取激活标签页的值
  mod_active_tab <- mod_server("demo_module")
  
  # 可选：在主server中进一步处理标签页值
  observe({
    req(mod_active_tab())
    # 这里可以添加自定义逻辑
  })
}

shinyApp(ui, server)

说明 #

• 模块内的input$module_tabs直接对应当前激活标签页的value
• 模块server返回该响应式对象，主server可直接调用使用
• 启动App后切换标签页，R控制台会实时打印当前激活的标签页ID

方案二：修正后的JavaScript实现 #

如果必须使用JavaScript方案，原代码的问题在于对模块内DOM元素的选择逻辑错误，模块中的元素会带有命名空间前缀，需调整选择器逻辑：

修改后的完整代码 #

library(shiny)
library(shinyjs)

mod_ui <- function(id) {
  ns <- NS(id)
  
  tagList(
    tabsetPanel(
      id = ns("module_tabs"),
      tabPanel("Tab 1", value = "tab1"),
      tabPanel("Tab 2", value = "tab2"),
      tabPanel("Tab 3", value = "tab3"),
      tabPanel("Tab 4", value = "tab4")
    )
  )
}

mod_server <- function(id) {
  moduleServer(id, function(input, output, session) {
    ns <- session$ns
    
    # 编写修正后的JavaScript代码
    jsCode <- sprintf('
      function getActiveTab() {
        // 获取激活标签页的导航链接
        var activeTabLink = $("#%s a.nav-link.active");
        if (activeTabLink.length > 0) {
          var tabValue = activeTabLink.data("value");
          Shiny.setInputValue("%s", tabValue);
          console.log("Browser console - Active tab:", tabValue);
        }
      }
      
      // 页面加载完成后初始化
      $(document).ready(function() {
        setTimeout(getActiveTab, 100);
      });
      
      // 监听标签页切换事件
      $("#%s").on("shown.bs.tab", function() {
        getActiveTab();
      });
    ', ns("module_tabs"), ns("active_tab"), ns("module_tabs"))
    
    shinyjs::useShinyjs()
    shinyjs::runjs(jsCode)
    
    # 监听JS传递的激活标签页值并输出到R控制台
    active_tab <- reactive({
      req(input$active_tab)
      cat("R console - Active tab:", input$active_tab, "\n")
      input$active_tab
    })
    
    return(active_tab)
  })
}

ui <- fluidPage(
  mod_ui("demo_module")
)

server <- function(input, output, session) {
  mod_active_tab <- mod_server("demo_module")
}

shinyApp(ui, server)

说明 #

• 将JavaScript逻辑移至模块server内，确保命名空间处理正确
• 通过nav-link.active选择激活的标签页导航链接，直接从data-value属性获取标签页ID
• 浏览器控制台和R控制台都会输出当前激活的标签页ID

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