在tabItems闪亮仪表板之间切换

Question

我正在创建一个闪亮的dashbord，我创建3个tabItems的问题是，当我点击其中一个menuItem我不能再次点击时，我无法在tabItems之间切换。 有人可以帮我，请代码R #UI

 library(shiny)
 library(shinydashboard)

 shinyUI(dashboardPage(skin = "black",
 dashboardHeader(title = h4("Tableau de bord des élections",style =      "color:navy"),
 titleWidth = 300
 ),
 dashboardSidebar(id="", 
 menuItem(h4(strong("Dashboard", align = "center")), tabName = "dashboard"),
 menuItem(h4(strong("Prédiction")), tabName = "Prédiction"),
 menuItem(h4(strong("Interprétation")), tabName = "Interprétation")),



 dashboardBody(
    tabItems(
        tabItem(tabName = "dashboard",h2("Analyse du comportement électoral  des citoyens tunisiens", align="center",style = "color:navy") ),

        tabItem(tabName = "Prédiction", h2("Prédiction du vote",    align="center",style = "color:blue")),
        tabItem(tabName = "Interprétation", h2("Interprétation"))

        )
        )))

Answer 1

我知道你的问题已经解决，你可能不会改变你的代码〜1年后，但对于像我这样的其他人遇到这个问题，我有一个更简单的解决方案。

你必须在sideBarMenu（）函数中包装所有“menuItem”。 这将解决问题并使菜单中的项目更大。

library(shiny)
library(shinydashboard)

shinyUI(dashboardPage(skin = "black",
dashboardHeader(title = h4("Tableau de bord des élections",style =      
"color:navy"),
titleWidth = 300
),
dashboardSidebar(id="", sidebarMenu(
menuItem(h4(strong("Dashboard", align = "center")), tabName = "dashboard"),
menuItem(h4(strong("Prédiction")), tabName = "Prédiction"),
menuItem(h4(strong("Interprétation")), tabName = "Interprétation"))),

dashboardBody(
tabItems(
    tabItem(tabName = "dashboard",h2("Analyse du comportement électoral  des citoyens tunisiens", align="center",style = "color:navy") ),

    tabItem(tabName = "Prédiction", h2("Prédiction du vote",    align="center",style = "color:blue")),
    tabItem(tabName = "Interprétation", h2("Interprétation"))

    )
)))

Answer 2

很高兴知道我不是唯一一个遇到这个问题的人！ 如果我理解你的问题，几个月前我遇到了同样的问题 - 在shinyDashboard中切换menuSubItems 。 尝试更改侧边栏代码以添加此内容:(我当然不是此代码段的作者 - 但它解决了我的问题）

dashboardSidebar(id="", 
                 tags$head(
                   tags$script(
                     HTML(
                       "
                        $(document).ready(function(){
                          // Bind classes to menu items, easiet to fill in manually
                          var ids = ['dashboard','Prédiction','Interprétation'];
                          for(i=0; i<ids.length; i++){
                            $('a[data-value='+ids[i]+']').addClass('my_subitem_class');
                          }

                          // Register click handeler
                          $('.my_subitem_class').on('click',function(){
                            // Unactive menuSubItems
                            $('.my_subitem_class').parent().removeClass('active');
                          })
                        })
                        "
                     )
                   )
                 ),

                 menuItem(h4(strong("Dashboard", align = "center")), tabName = "dashboard"),
                 menuItem(h4(strong("Prédiction")), tabName = "Prédiction"),
                 menuItem(h4(strong("Interprétation")), tabName = "Interprétation"))

如果添加新选项卡，则可以将其tabNames添加到var ids行。