html - [ Shiny ] : Add link to another tabPanel in another tabPanel

Question

我正在尝试在我的“主页”tabPanel 上放置一个指向我应用程序的所有其他 tabPanel 的链接。

思路如下:

ui = navbarPage("",
         tabPanel("home",
                  fluidPage(
                    fluidRow(box("this 1st box should lead me to tab1a")),
                    fluidRow(box("this 2nd box should lead me to tab1b")),
                    fluidRow(box("this 2nd box should lead me to tab2")))
            ),
         navbarMenu("tab1",
                    tabPanel("tab1a"),
                    tabPanel("tab1b")),
                    tabPanel("tab2")
         )

shinyApp(ui, server=function(input, output) {})

我在 Add link panel tabs in Shiny with various top level navigation bars 中看到了答案，但我无法在我的代码上实现它，因为它处理 html(我以前从未工作过，所以我不熟悉这些功能等)并且代码考虑了 tabPanels在同一个选项卡中(不确定这是否就是它在这里不起作用的原因，如果它不起作用，因为我试图链接的选项卡位于 navbarPage 或其他东西上)。

任何人都可以帮助我或告诉我在哪里可以学习如何在我的示例中实现它吗？

Answer 1

我猜这个答案是纯 JavaScript 编写的，但非常少。由于 Shiny 使用随机数字 ID 创建选项卡，并且不提供对其使用的 ID 的访问权限，因此这确实是在客户端完成的。但是没有将此实现到其他场景所需的 JavaScript 知识。 JavaScript 部分仅用于复制/粘贴，触发命令很容易理解。

我做了什么？我安装了一个功能，可以找到与所需选项卡对应的导航栏链接，然后单击它。可以将此实用程序添加到具有“onclick”属性的任何元素。不需要特殊标签(例如，不需要“a”标签)。

下面的代码应该可以轻松自定义此解决方案以满足您的需求。

注意:我用的是原版的box代码，虽然没有任何视觉效果。

代码:

library(shiny)
library(shinydashboard)

ui = shinyUI(

  navbarPage("Header",
    tabPanel("home",
      tags$head(tags$script(HTML('
        var fakeClick = function(tabName) {
          var dropdownList = document.getElementsByTagName("a");
          for (var i = 0; i < dropdownList.length; i++) {
            var link = dropdownList[i];
            if(link.getAttribute("data-value") == tabName) {
              link.click();
            };
          }
        };
      '))),
      fluidPage(
        fluidRow(box("this 1st box should lead me to tab1a", onclick = "fakeClick('tab1a')")),
        fluidRow(box("this 2nd box should lead me to tab1b", onclick = "fakeClick('tab1b')")),
        fluidRow(box("this 2nd box should lead me to tab2", onclick = "fakeClick('tab2')"))
      )
    ), 
    navbarMenu("tab1",
      tabPanel("tab1a", "Some Text inside Tab 1a."),
      tabPanel("tab1b", "Some Text inside Tab 1b.")
    ),

    tabPanel("tab2", "Some Text inside Tab 2.")
  )
)

server = function(input, output, session){}

runApp(shinyApp(ui, server), launch.browser = TRUE)

玩得开心!