闪亮的仪表板：通过点击infoBox跳转到应用程序中的特定元素

Question

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

我的解决方案是将 infoBox 包围在 div 中，并添加 href=#id_of_element 属性。不幸的是，这个解决方案仅适用于带有额外 "data-toggle"="tab" 属性的 tab （它也不会将打开的 tab 更改为 active ），但这不是我想要的。

我的问题是：我如何添加所提到的选项，为什么这个解决方案不起作用？这里是一个小例子，说明我想做什么：

UI

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)
} )

- Maju116

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

- Maju116