如何在Shiny应用首页Tab的Box中添加跳转至其他Tab的链接？

以下是实现点击Box跳转至Tab 2并添加悬停高亮效果的完整代码：

library(tidyverse)
library(DT)
library(shiny)
library(shinydashboard)
library(shinyWidgets)

ui <- navbarPage(
    useShinydashboard(),
    
    # 自定义CSS：实现Box悬停高亮和交互提示
    tags$style(HTML("
        #tab_link_box {
            transition: all 0.3s ease; /* 平滑过渡动画 */
        }
        #tab_link_box:hover {
            cursor: pointer; /* 鼠标变为手型，提示可点击 */
            background-color: #f0f8ff; /* 悬停时浅蓝背景高亮 */
            border-color: #204d74; /* 加深边框颜色增强视觉反馈 */
        }
    ")),
    
    tabPanel(
        title = "Home",
        
        box(
            title = "点击跳转至Tab 2",
            status = "primary",
            width = 3,
            id = "tab_link_box" # 给Box设置唯一ID，用于CSS和JS定位
        )
    ),
    
    tabPanel(
        title = "Tab 1"
    ),
    
    tabPanel(
        title = "Tab 2",
        dataTableOutput("mtcars_table")
    ),
    
    # JavaScript：监听Box点击事件，触发Tab切换
    tags$script(HTML("
        $('#tab_link_box').on('click', function() {
            // 通过data-value属性定位到Tab2的导航链接，触发点击完成切换
            $('a[data-value=\"Tab 2\"]').click();
        });
    "))
)

server <- function(input, output) {
    output$mtcars_table <- DT::renderDataTable({mtcars})
}

shinyApp(ui, server)

关键实现说明 #

• Box的ID设置：给目标Box指定唯一ID tab_link_box，确保CSS和JavaScript能精准定位到该元素。
• 悬停高亮效果：通过自定义CSS，实现鼠标悬停时光标变为手型、背景和边框颜色变化的交互提示，同时添加过渡动画让效果更自然。
• Tab跳转逻辑：用JavaScript监听Box的点击事件，找到导航栏中对应"Tab 2"的链接元素（通过data-value属性匹配tabPanel的title），触发其点击动作完成页面切换。

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