闪亮：单击图像时更改选项卡答案

【问题标题】：shiny:change tab when click on image闪亮：单击图像时更改选项卡
【发布时间】：2017-12-16 23:19:16
【问题描述】：

我正在构建一个 Shiny 应用程序，而我的一些用户（对这种布局不太熟悉）不了解该应用程序可以与选项卡一起使用，他们只是看不到从主页到哪里去。

这就是为什么我想在主页上显示一个大信息图，当他们点击它时，它会自动激活第二个标签。我知道如何为图片添加链接：

tags(a(img(src="image.png"), href="link.com"))

而且我知道如何以编程方式选择不同的选项卡：

updateTabsetPanel(session, inputId="navbar", selected="tab2")

但是如何结合这两个动作呢？谢谢，

【问题讨论】：

您是否想过使用导航栏菜单而不是标签面板？
好吧，我不得不在应用程序的主页上放很多信息，所以标签在顶部并不那么明显。我不确定添加菜单会解决这个问题，尽管我可以有一个菜单除了到图像点击..
只是一个想法。导航栏菜单在大多数主题中都很明显，您只需一点 css 代码即可轻松自定义它（导航栏颜色等）。

标签： r shiny navbar

【解决方案1】：

您可以为图像指定id，并使用shinyjs 中的onclick() 函数。工作示例：

require(shiny)
require(shinyjs)


ui <- fluidPage(
  img(id="my_img",src="image.png",style="cursor:pointer;"),
  useShinyjs(),
  tabsetPanel(id="navbar",
              tabPanel("tab1", p("This is tab 1")),
              tabPanel("tab2", p("This is tab 2"))
  )
)



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

  shinyjs::onclick("my_img",  updateTabsetPanel(session, inputId="navbar", selected="tab2"))

}

shinyApp(ui,server)

希望这会有所帮助！

【讨论】：

感谢弗洛里安，我想我真的应该深入研究一下shinyjs packagr，它充满了好东西。该解决方案完美运行，除了鼠标图标在悬停时不会改变（表明它是一种可点击的链接
嗨，agenis，shinyjs 是 Dean Attali 的一个很棒的包，值得研究更多他的东西，我从他的博客/网站中学到了很多东西。无论如何，可以使用一些自定义 CSS 来更改光标，请参阅更新的示例。