Shiny中如何实现点击按钮解锁标签页并自动跳转至目标页

你现有代码只需要调整提交按钮的点击逻辑，在移除标签页禁用状态后主动触发第二个标签页的点击事件，就能实现点击按钮自动跳转的效果，不需要改动原有禁用逻辑。

最简修改方案（纯前端实现，无需改服务端） #

直接替换原有actionButton的onclick属性内容即可，修改后完整代码：

library(shiny)

ui <- shinyUI(navbarPage(
  "",
  tabPanel(
    h1("Tab1"), 
    value = "nav1",
    mainPanel(
      br(),
      h2("The user must press this button to access the other tab."),
      br(),
      shiny::actionButton(
        'button', 
        'press the button', 
        # 新增触发标签页点击的逻辑
        onclick = "$(tab).removeClass('disabled'); $('a[data-value=\"nav2\"]').trigger('click')"
      )
    )
  ),
  tabPanel(
    h1("Tab2"),
    value = "nav2",
    uiOutput("tab2contents")
  ),
  tags$script(
    '
    var tab = $(\'a[data-value="nav2"]\').parent().addClass("disabled");
    $(function(){
      $(tab.parent()).on("click", "li.disabled", function(e) {
        e.preventDefault();
        return false;
      });
    });
    '
  )
))    

server <- shinyServer(function(input, output) {

})

shinyApp(ui = ui, server = server)

核心改动就是在按钮点击事件里加了$('a[data-value="nav2"]').trigger('click')，这行代码会模拟用户点击第二个标签页的操作，在解除禁用后立刻完成跳转。

适合加校验的服务端实现方案 #

如果点击按钮后需要先做表单校验、数据计算等操作，再判断是否允许跳转，可以用Shiny自带的updateNavbarPage函数实现：

• 按钮的onclick只保留移除禁用类的逻辑，不用加触发点击的代码
• 给navbarPage设置一个id参数，用于定位导航栏组件
• 在server端添加按钮点击的监听事件，校验通过后调用跳转函数

示例代码：

library(shiny)

ui <- shinyUI(navbarPage(
  id = "nav", # 给导航栏加id
  "",
  tabPanel(
    h1("Tab1"), 
    value = "nav1",
    mainPanel(
      br(),
      h2("The user must press this button to access the other tab."),
      br(),
      # onclick只保留移除禁用的逻辑
      shiny::actionButton('button', 'press the button', onclick = "$(tab).removeClass('disabled')")
    )
  ),
  tabPanel(
    h1("Tab2"),
    value = "nav2",
    uiOutput("tab2contents")
  ),
  tags$script(
    '
    var tab = $(\'a[data-value="nav2"]\').parent().addClass("disabled");
    $(function(){
      $(tab.parent()).on("click", "li.disabled", function(e) {
        e.preventDefault();
        return false;
      });
    });
    '
  )
))    

server <- shinyServer(function(input, output) {
  observeEvent(input$button, {
    # 此处可添加自定义校验逻辑，比如检查输入框是否为空、数据格式是否正确
    # 校验通过后执行跳转
    updateNavbarPage(inputId = "nav", selected = "nav2")
  })
})

shinyApp(ui = ui, server = server)

这种方式更灵活，适合有复杂交互的场景。

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