css 更改闪亮标签的颜色条件是另一个标签处于活动状态

mrphzbgm  于 2023-04-13  发布在  其他
关注(0)|答案(2)|浏览(131)

有没有一种方法可以在另一个标签处于活动状态的情况下改变一个标签的文本颜色?我知道如何改变所选标签的文本颜色,但我想同时改变另一个特定标签的颜色。
例如,在下面的最小示例中,每当选择Tab 2时,我想用红色突出显示Tab 2和Tab 3标签:

# ui
ui <- navbarPage(
  id = "navbar",
  tags$style(HTML(".tabbable > .nav > li > a {color:blue}
                    .tabbable > .nav > li[class=active] > a {color:red}")),
  
  tabsetPanel(id="tabs", 
              tabPanel(value = "tab1", title= "Tab1"),
              tabPanel(value = "tab2", title= "Tab2"),
              tabPanel(value = "tab3", title= "Tab3")
              )
  )

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

shinyApp(ui, server)

我想这是很容易实现的,但我是一个CSS初学者。任何帮助将不胜感激!

rjjhvcjd

rjjhvcjd1#

最简单(也是最快)的方法是使用一点JavaScript

library(shiny)

ui <- navbarPage(
  id = "navbar",
  tags$style(HTML("
    .tabbable > .nav > li > a {color:blue}
    .tabbable > .nav > li.active > a {color:red}
    .tabbable > .nav > li > a.red_panel {color:red}
  ")),
  
  tabsetPanel(id="tabs", 
              tabPanel(value = "tab1", title= "Tab1"),
              tabPanel(value = "tab2", title= "Tab2"),
              tabPanel(value = "tab3", title= "Tab3")
  ),
  
  # We could also append the style directly using .css()
  tags$script(HTML("
    $('#tabs').on('shiny:inputchanged', function(event) {
      console.log(event.value)
      if (event.value === 'tab2') {
        $('a[data-value = \"tab3\"]').addClass('red_panel');
      } else {
        $('a[data-value = \"tab3\"]').removeClass('red_panel');
      };
    });
  "))
)

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

shinyApp(ui, server)
92dk7w1h

92dk7w1h2#

我不确定我是否理解你的问题,但如果我理解的话,这就是你想要的:

css1 <- ".tabbable > .nav > li > a {color: blue;}
.tabbable > .nav > li[class=active] > a {color: red;}
"

css2 <- ".tabbable > .nav > li > a {color: blue;}
.tabbable > .nav > li[class=active] > a {color: red;}
.tabbable > .nav > li > a[data-value=tab3] {color: red;}
"

# ui
ui <- navbarPage(
  id = "navbar",
  uiOutput("CSS"),
  
  tabsetPanel(id="tabs", 
              tabPanel(value = "tab1", title= "Tab1"),
              tabPanel(value = "tab2", title= "Tab2"),
              tabPanel(value = "tab3", title= "Tab3")
  )
)

# server
server <- function(input, output, session) {
  
  output[["CSS"]] <- renderUI({
    css <- ifelse(input[["tabs"]] == "tab2", css2, css1)
    tags$style(HTML(css))
  })
  
}

shinyApp(ui, server)

相关问题