html - Shiny 的仪表板 : jump to specific element in app by clicking infoBox

Question

在我 Shiny 的应用程序中，我想添加一个选项，让用户跳转到应用程序中当前或不同的 选项卡 上的特定元素(表格、图表，只要有 id 的任何内容) ，通过单击 infoBox(或我想要的任何其他对象)。

我的解决方案是用 div 包围 infoBox 并添加 href=#id_of_element 属性。不幸的是，此解决方案仅适用于具有额外 "data-toggle"= "tab" 属性的 tabs(它也不会更改打开的 tab active)，但这不是我想要的。

我的问题是:如何添加提到的选项以及为什么此解决方案不起作用？这是我想做的一个小例子:

界面

library(shiny)
library(shinydashboard)

shinyUI(
  dashboardPage(
    skin = "blue",
     dashboardHeader(title = "Example"),
    dashboardSidebar(
      sidebarMenu(id = "sidebarmenu",
              menuItem("Tab1", icon = icon("line-chart"),
                       menuSubItem("SubTab1", tabName = "sub1", icon = icon("bar-chart")),
                          menuSubItem("SubTab2", tabName = "sub2", icon = icon("database"))),
              menuItem("Tab2", tabName = "tab2", icon = icon("users"))
      )
    ),
    dashboardBody(
      tabItems(
       tabItem(tabName = "sub1",
          tags$div(href="#s2t2",
                   infoBox(value = "Go to table 2 in SubTab2 (not working)",title = "Click me")),
          tags$div(href="#shiny-tab-tab2", "data-toggle" = "tab",
                   infoBox(value = "Go to Tab2 (this works)",title = "Click me"))
        ),
        tabItem(tabName = "sub2",
               tableOutput("s2t1"),
               tableOutput("s2t2")
                ),
        tabItem(tabName = "tab2",
                tableOutput("t2t1"),
                tableOutput("t2t2")
        )
      )
    )
  )
)

服务器:

 shinyServer(function(input, output,session) {
  output$s2t1<- renderTable(mtcars)
  output$s2t2<- renderTable(mtcars)
  output$t2t1<- renderTable(mtcars)
  output$t2t2<- renderTable(mtcars)
} )

Answer 1

我找到了我的答案:

$(document).ready(function() {
    $("#div1").click(function() {
       $(".sidebar-menu a[href=\'#shiny-tab-tab2\']").tab("show");
setTimeout(function(){
        var top = $("#t2t2").position().top;
        $(window).scrollTop( top );
        }, 300);
    });
});

div1 是 infoBox 周围的 div