Shinydashboard中点击actionButton跳转页面失败求助

在shinydashboard框架下，直接使用onclick = "location.href='#shiny-tab-four';"的方式无法实现跨菜单组的标签页跳转（比如从Page1>B跳转到Page2>D），但该逻辑在普通Shiny应用中可正常运行。以下是两种可行的解决方案：

方法1：使用shinyjs模拟侧边栏菜单点击 #

通过shinyjs调用JavaScript，直接触发目标菜单选项的点击事件，同时确保目标菜单的父级菜单处于展开状态。

修改后的完整代码：

library(shiny)
library(shinydashboard)
library(shinyjs)

header <- dashboardHeader(title = "Dashboard")

sidebar <- dashboardSidebar(
  sidebarMenu(
    menuItem(
      text = "Page 1",
      menuSubItem(text = "A", tabName = "one"), 
      menuSubItem(text = "B", tabName = "two")
    ), 
    menuItem(
      text = "Page 2", 
      menuSubItem(text = "C", tabName = "three"), 
      menuSubItem(text = "D", tabName = "four")
    )
  )
)

body <- dashboardBody(
  useShinyjs(), # 初始化shinyjs
  tabItems(
    tabItem(
      tabName = "one", titlePanel(title = "A")
    ), 
    tabItem(
      tabName = "two", titlePanel(title = "B"), 
      actionButton("btn1", "Go to Next Table", 
                   onclick = "
                     // 展开Page2菜单
                     $('a:contains(\"Page 2\")').parent().addClass('active').find('.treeview-menu').addClass('menu-open');
                     // 触发D选项的点击
                     $('a[data-value=\"four\"]').click();
                   ")
    ), 
    tabItem(
      tabName = "three", titlePanel(title = "C")
    ), 
    tabItem(
      tabName = "four", titlePanel(title = "D")
    )
  )
)

ui_2 <- dashboardPage(header, sidebar, body)

server_2 <- function(input, output, session) {
  
}

shinyApp(ui_2, server_2)

方法2：使用Shiny内置的updateTabItems函数 #

这种方法更贴合Shiny的响应式设计模式，通过在server端监听按钮点击事件，主动更新选中的标签页。

修改后的完整代码：

library(shiny)
library(shinydashboard)

header <- dashboardHeader(title = "Dashboard")

sidebar <- dashboardSidebar(
  sidebarMenu(
    id = "sidebarmenu", # 必须给sidebarMenu设置id
    menuItem(
      text = "Page 1",
      menuSubItem(text = "A", tabName = "one"), 
      menuSubItem(text = "B", tabName = "two")
    ), 
    menuItem(
      text = "Page 2", 
      menuSubItem(text = "C", tabName = "three"), 
      menuSubItem(text = "D", tabName = "four")
    )
  )
)

body <- dashboardBody(
  tabItems(
    tabItem(
      tabName = "one", titlePanel(title = "A")
    ), 
    tabItem(
      tabName = "two", titlePanel(title = "B"), 
      actionButton("btn1", "Go to Next Table")
    ), 
    tabItem(
      tabName = "three", titlePanel(title = "C")
    ), 
    tabItem(
      tabName = "four", titlePanel(title = "D")
    )
  )
)

ui_2 <- dashboardPage(header, sidebar, body)

server_2 <- function(input, output, session) {
  observeEvent(input$btn1, {
    # 更新选中的标签页，同时父菜单会自动展开
    updateTabItems(session, "sidebarmenu", selected = "four")
  })
}

shinyApp(ui_2, server_2)

说明 #

• 方法2是更推荐的Shiny原生实现方式，无需依赖额外JavaScript，逻辑更清晰且易于维护。
• 方法1通过直接操作DOM元素实现跳转，适合需要自定义交互的场景，但需要注意选择器的准确性。

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