java - 在 Shiny 中添加链接面板选项卡和各种顶级导航栏

Question

我正在尝试在 Shiny 的应用程序中使用导航栏创建链接。我在 A gist of programatically changing panel tabs in Shiny 找到了以下代码。它对于第一个导航面板非常有用，但对于第二个导航面板则不起作用。这是我的 ui.R:

require(shiny)


shinyUI(navbarPage("",
                   tabPanel("Foo",
                            tabsetPanel(
                              tabPanel("Foo1",                            
                                       sidebarLayout(
                                         sidebarPanel(
                                           tags$div(div(id="Foo2", tags$a("Foo2"))
                                           )
                                             ),
                                         mainPanel(p("hello Foo1"))
                              )),
                              tabPanel("Foo2",
                                       sidebarLayout(
                                         sidebarPanel(),
                                         mainPanel(p("hello Foo2"))), 
                                         HTML("<script>$('#Foo2').click(function() {
                                                        tabs = $('.tabbable .nav.nav-tabs li')
                                                         tabs.each(function() {
                                                            $(this).removeClass('active')
                                                         })
                                                         $(tabs[1]).addClass('active')

                                                         tabsContents = $('.tabbable .tab-content .tab-pane')
                                                         tabsContents.each(function() {
                                                            $(this).removeClass('active')
                                                         })
                                                         $(tabsContents[1]).addClass('active')

                                                        $('#Foo2').trigger('change').trigger('shown');

                                                     })</script>")
                                       )
                              )
                                ),
                   tabPanel("Bar",
                            tabsetPanel(
                              tabPanel("Bar1",                            
                                       sidebarLayout(
                                         sidebarPanel(
                                           tags$div(div(id="Bar2", tags$a("Bar2"))
                                           )
                                         ),
                                         mainPanel(p("hello Bar1"))
                                       )),
                              tabPanel("Bar2",
                                       sidebarLayout(
                                         sidebarPanel(),
                                         mainPanel(p("hello Bar2"))), 
                                       HTML("<script>$('#Bar2').click(function() {
                                                        tabs = $('.tabbable .nav.nav-tabs li')
                                                         tabs.each(function() {
                                                            $(this).removeClass('active')
                                                         })
                                                         $(tabs[1]).addClass('active')

                                                         tabsContents = $('.tabbable .tab-content .tab-pane')
                                                         tabsContents.each(function() {
                                                            $(this).removeClass('active')
                                                         })
                                                         $(tabsContents[1]).addClass('active')

                                                        $('#Bar2').trigger('change').trigger('shown');

                                                     })</script>")
                              )
                            )
                   )
                   )
)

当您单击 foo1 的侧边栏面板时，指向 foo2 的链接会做出响应。但是当您在 Bar 中执行相同操作时，它会转到其他地方。

Answer 1

这就是解决方案；)。

require(shiny)
shinyUI(navbarPage("",
            tabPanel("Foo",
               tabsetPanel(
                    tabPanel("Foo1",                            
                              sidebarLayout(
                                  sidebarPanel(tags$div(div(id="Foo2", tags$a("Foo2")))),
                                  mainPanel(p("hello Foo1")))
                     ),
                     tabPanel("Foo2",
                               sidebarLayout(
                                   sidebarPanel(),
                                   mainPanel(p("hello Foo2"))), 
                                   HTML("<script>$('#Foo2').click(function() {
                                        tabs = $('.tabbable .nav.nav-tabs li')
                                        tabs.each(function() {
                                        $(this).removeClass('active')
                                        })
                                        $(tabs[1]).addClass('active')

                                        tabsContents = $('.tabbable .tab-content .tab-pane')
                                        tabsContents.each(function() {
                                        $(this).removeClass('active')
                                        })
                                        $(tabsContents[1]).addClass('active')

                                        $('#Foo2').trigger('change').trigger('shown');

                                        })</script>")
                                   )
                          )
                        ),
            tabPanel("Bar",
               tabsetPanel(
                     tabPanel("Bar1",                            
                               sidebarLayout(
                                   sidebarPanel(tags$div(div(id="Bar2",tags$a("Bar2")))),
                               mainPanel(p("hello Bar1"))
                                   )),
                     tabPanel("Bar2",
                               sidebarLayout(
                                   sidebarPanel(),
                                   mainPanel(p("hello Bar2"))), 
                                   HTML("<script>$('#Bar2').click(function() {
                                        tabs = $('.tabbable .nav.nav-tabs li')
                                        tabs.each(function() {
                                        $(this).removeClass('active')
                                        })
                                        $(tabs[3]).addClass('active')

                                        tabsContents = $('.tabbable .tab-content .tab-pane')
                                        tabsContents.each(function() {
                                        $(this).removeClass('active')
                                        })
                                        $(tabsContents[3]).addClass('active')

                                        $('#Bar2').trigger('change').trigger('shown');

                                        })</script>")










                          )
                          )
                        )
                        )
                          )