如何在基础R/Shiny中实现点击图片切换TabPanel？

原代码的问题在于<img>标签本身不是Shiny的输入控件，没法触发server端的响应事件。我们可以用基础Shiny的actionLink把图片包起来，actionLink是原生的可交互输入控件，能捕捉点击事件，完全不需要额外包。

修改后的完整代码 #

ui <- fluidPage(
  # 用actionLink包裹图片，去掉默认链接样式
  actionLink(
    id = "link1",
    label = img(src = "img/hexsticker.png", style = "cursor:pointer;"),
    style = "text-decoration: none; border: none;"
  ),
  actionLink(
    id = "link2",
    label = img(src = "img/hexsticker.png", style = "cursor:pointer;"),
    style = "text-decoration: none; border: none;"
  ),
  div(style = 'display: flex; gap: 5em; width: 500px; justify-content: space-between;',
      tabsetPanel(
        id = "navbar1",
        tabPanel("tab1", p("This is tab 1"), value = 1),
        tabPanel("tab2", p("This is tab 2"), value = 2)
      )
  )
)

server <- function(input, output, session){
  # 监听第一个图片链接的点击，切换到tab1
  observeEvent(input$link1, {
    updateTabsetPanel(session, inputId = "navbar1", selected = 1)
  })
  
  # 监听第二个图片链接的点击，切换到tab2
  observeEvent(input$link2, {
    updateTabsetPanel(session, inputId = "navbar1", selected = 2)
  })
  
  # 如果有更多图片和tab，用批量处理更高效，比如：
  # lapply(1:2, function(i) {
  #   observeEvent(input[[paste0("link", i)]], {
  #     updateTabsetPanel(session, inputId = "navbar1", selected = i)
  #   })
  # })
}

shinyApp(ui, server)

关键说明 #

• actionLink作为容器包裹图片，既保留了图片的显示效果，又能让Shiny捕捉到点击事件。
• 通过style = "text-decoration: none; border: none;"去掉actionLink默认的下划线和边框，让它看起来和纯图片无区别。
• server端的observeEvent监听每个actionLink的点击事件，调用updateTabsetPanel切换到对应value的tab即可。如果有大量tab，用lapply批量生成监听逻辑，避免重复代码。

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