TabPanelがアクティブであるか、またはシャイニーでホバーオーバーしているときにtabPanelの背景色を変更します

Question

Rシャイニーアプリを作成しました。アクティブであるときまたは上に移動したときにtabPanelの背景色を変更したいと思います。私はCSSファイルの正しいプロパティを定義することを使用しているかどうかはわかりません。

library(shiny) 
library(shinydashboard) 

ui <- function(){ 
       navbarPage(title = 'Hello', 
          tabPanel("title2"), 
          tabPanel("title3"), 

       tags$style(type = 'text/css', 
          '.navbar { background-color: red;}', 
          '.navbar-default .navbar-brand{color: white;}', 
          '.tab-panel{ background-color: red; color: white}', 
          '.nav navbar-nav li.active:hover a, .nav navbar-nav li.active a { 
          background-color: green ; 
          border-color: green; 
          }' 

       )) 

} 

server <- function(input, output, session){ 
} 


shinyApp(ui = ui, server = server) 

私は非常にこれであなたの助けをいただければ幸いです：あなたは、私が使用しているコードを見ることができます

enter image description here

。

Answer 1

こんにちは、私の例のようにCSS文字列がHTML()の機能を持つHTMLであることを光栄に伝える必要があります。それでも、より良いが必要ではないがheadタグに入れることです。私はまたあなたのCSSコードにいくつかの問題があったと思います。すべてのクラスを常にリードするように注意してください。.

library(shiny) 
library(shinydashboard) 

ui <- function(){ 
    navbarPage(title = 'Hello', 
      tabPanel("title2"), 
      tabPanel("title3"), 
      tags$head(
       tags$style(type = 'text/css', 
          HTML('.navbar { background-color: red;} 
          .navbar-default .navbar-brand{color: white;} 
          .tab-panel{ background-color: red; color: white} 
          .navbar-default .navbar-nav > .active > a, 
          .navbar-default .navbar-nav > .active > a:focus, 
          .navbar-default .navbar-nav > .active > a:hover { 
           color: #555; 
           background-color: green; 
          }') 
         ) 
      ) 
      ) 

} 

server <- function(input, output, session){ 
} 


shinyApp(ui = ui, server = server)