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

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。