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










                          )
                          )
                        )
                        )
                          )

使用各种顶级导航栏在Shiny中添加链接面板选项卡

1 个答案: