Shiny R中HTML/CSS未渲染：选中导航链接背景不变黄问题

1. 导航容器缺少nav类，CSS选择器无法匹配 #

你的CSS选择器是.nav > li.active > a，但创建的导航列表tags$ul未添加class="nav"，导致浏览器找不到对应元素，样式无法生效。

2. 未手动给当前页面的导航项添加active类 #

brochure不会自动为当前页面的导航列表项添加active类，需要根据当前请求路径判断，手动给对应的<li>标签添加该类。

3. CSS样式标签放置位置错误 #

你把tags$head(tags$style(...))放在了tags$ul内部，不符合HTML结构规范，浏览器可能无法正确解析该样式标签，导致CSS不生效。

修正后的代码 #

css <- "
.nav > li.active > a { 
    background-color: yellow;
}
"

nav_links <- function(request) {
  # 获取当前页面路径
  current_path <- req_path(request)
  
  tags$ul(
    class = "nav",  # 添加nav类，匹配CSS选择器
    tags$li(
      class = ifelse(current_path == "/", "active", ""),
      tags$a(href = paste0(baseurl,"/"), "home")
    ),
    tags$li(
      class = ifelse(current_path == "/page2", "active", ""),
      tags$a(href = paste0(baseurl,"/page2"), "page2")
    ),
    tags$li(
      class = ifelse(current_path == "/page3", "active", ""),
      tags$a(href = paste0(baseurl,"/page3"), "page3")
    ),
    tags$li(
      class = ifelse(current_path == "/page4", "active", ""),
      tags$a(href = paste0(baseurl,"/page4"), "page4")
    ),
    tags$li(
      class = ifelse(current_path == "/page5", "active", ""),
      tags$a(href = paste0(baseurl,"/page5"), "page5")
    ),
    tags$li(
      class = ifelse(current_path == "/page6", "active", ""),
      tags$a(href = paste0(baseurl,"/page6"), "page6")
    ),
    tags$li(
      class = ifelse(current_path == "/contact", "active", ""),
      tags$a(href = paste0(baseurl,"/contact"), "contact")
    )
  )
}

page_1 <- function(){
  page(
    href = "/",
    ui = function(request){
      tagList(
        tags$head(
          tags$style(HTML(css))  # 将样式移至页面头部，确保正确加载
        ),
        h1("This is my first page"),
        nav_links(request),  # 传入request参数判断当前路径
        plotOutput("plot")
      )
    },
    server = function(input, output, session){
      output$plot <- renderPlot({
        plot(mtcars)
      })
    }
  )
}

内容的提问来源于stack exchange，提问作者maia