在 Shiny 中添加 link 面板选项卡，带有各种顶级导航栏

Question

我正在尝试在 Shiny 应用中使用导航栏创建 links。我在 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 的侧边栏面板时，link 到 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>")










                          )
                          )
                        )
                        )
                          )

在 Shiny 中添加 link 面板选项卡，带有各种顶级导航栏

Add link panel tabs in Shiny with various top level navigation bars

java

r

rstudio

shiny