闪亮的应用程序 - 单击新选项卡后，选项卡仍由浏览器选中

Question

在Shiny应用程序中单击新选项卡时，浏览器将保持选中/突出显示该选项卡。它会在选项卡周围创建一个虚线矩形，您必须单击其他位置才能使选项卡再次显示正常。这是来自RStudio画廊的一个例子：http://shiny.rstudio.com/gallery/tabsets.html

这似乎只是Firefox和Internet Explorer中的默认行为，但不是Safari和Chrome。

这是一个小问题，但它很烦人，我花了一个小时试图修复它没有成功。我希望标签在用户点击标签的最重要时刻保留其标签式的形状！

有什么想法吗？

Answer 1

您可以通过添加一些CSS来删除选项卡后的虚线：

library(shiny)
runApp(list(ui = fluidPage(
  titlePanel("Tabsets"),
  sidebarLayout(
    sidebarPanel(
      radioButtons("dist", "Distribution type:",
                   c("Normal" = "norm",
                     "Uniform" = "unif",
                     "Log-normal" = "lnorm",
                     "Exponential" = "exp")),
      br(),
      sliderInput("n", 
                  "Number of observations:", value = 500,
                  min = 1, max = 1000)
    ),
    mainPanel(
      tabsetPanel(type = "tabs", 
                  tabPanel("Plot", plotOutput("plot")), 
                  tabPanel("Summary", verbatimTextOutput("summary")), 
                  tabPanel("Table", tableOutput("table"))
      )
    )
  )
  , tags$head(tags$style(
    HTML(
      ".nav-tabs > .active > a, .nav-tabs > .active > a:hover { outline: 0;}")
  ))
)
, server = function(input, output) {
  data <- reactive({
    dist <- switch(input$dist, norm = rnorm, unif = runif,
                   lnorm = rlnorm, exp = rexp, rnorm)    
    dist(input$n)
  })
  output$plot <- renderPlot({
    dist <- input$dist
    n <- input$n    
    hist(data(), main=paste('r', dist, '(', n, ')', sep=''))
  })
  output$summary <- renderPrint({summary(data())})
  output$table <- renderTable({data.frame(x=data())}) 
})
)

所以这里

tags$head(tags$style(
    HTML(
      ".nav-tabs > .active > a, .nav-tabs > .active > a:hover { outline: 0;}")
  ))

在相关数量上将outline属性设置为0.