Dash Python：通过链接切换不同标签页的实现方法

Dash的Bootstrap Tabs组件并非通过HTML锚点（#xxx）切换标签页，而是通过组件的active_tab属性控制显示状态，因此直接用锚点链接无法生效，需要通过回调函数监听点击事件并修改active_tab属性来实现跳转。

下面提供两种可行的实现方式：

方式一：使用html.A结合回调（链接样式） #

这种方式保留超链接的视觉样式，适合需要文字链接的场景：

from dash import Dash, html, Input, Output, callback, callback_context
import dash_bootstrap_components as dbc

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

# Tab1内容，包含跳转到Tab2的链接
tab1_content = dbc.CardBody([
    html.H3("This is Tab 1"),
    html.A("Take me to Tab 2", href="#", id="link-to-tab2", n_clicks=0)
])

# Tab2内容，包含跳转到Tab1的链接
tab2_content = dbc.CardBody([
    html.H3("This is Tab 2"),
    html.A("Take me to Tab 1", href="#", id="link-to-tab1", n_clicks=0)
])

app.layout = dbc.Container([
    dbc.Tabs(
        id="tabs-container",
        active_tab="Tab1",  # 初始激活Tab1
        children=[
            dbc.Tab(tab1_content, id='Tab1', label='Tab 1'),
            dbc.Tab(tab2_content, id='Tab2', label='Tab 2'),
        ]
    )
])

@callback(
    Output("tabs-container", "active_tab"),
    Input("link-to-tab1", "n_clicks"),
    Input("link-to-tab2", "n_clicks"),
    prevent_initial_call=True  # 防止初始加载时触发回调
)
def switch_tab(n_clicks_tab1, n_clicks_tab2):
    # 获取触发回调的组件ID
    triggered_component = callback_context.triggered[0]["prop_id"].split(".")[0]
    if triggered_component == "link-to-tab1":
        return "Tab1"
    elif triggered_component == "link-to-tab2":
        return "Tab2"

if __name__ == "__main__":
    app.run_server(debug=True)

方式二：使用dbc.Button（按钮样式） #

如果需要按钮样式的跳转入口，可替换html.A为dbc.Button，逻辑完全一致：

from dash import Dash, html, Input, Output, callback, callback_context
import dash_bootstrap_components as dbc

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

tab1_content = dbc.CardBody([
    html.H3("This is Tab 1"),
    dbc.Button("Go to Tab 2", id="btn-to-tab2", n_clicks=0)
])

tab2_content = dbc.CardBody([
    html.H3("This is Tab 2"),
    dbc.Button("Go to Tab 1", id="btn-to-tab1", n_clicks=0)
])

app.layout = dbc.Container([
    dbc.Tabs(
        id="tabs-container",
        active_tab="Tab1",
        children=[
            dbc.Tab(tab1_content, id='Tab1', label='Tab 1'),
            dbc.Tab(tab2_content, id='Tab2', label='Tab 2'),
        ]
    )
])

@callback(
    Output("tabs-container", "active_tab"),
    Input("btn-to-tab1", "n_clicks"),
    Input("btn-to-tab2", "n_clicks"),
    prevent_initial_call=True
)
def switch_tab(n1, n2):
    triggered_component = callback_context.triggered[0]["prop_id"].split(".")[0]
    return "Tab1" if triggered_component == "btn-to-tab1" else "Tab2"

if __name__ == "__main__":
    app.run_server(debug=True)

关键说明 #

1. 必须给Tabs组件设置id和初始active_tab值，确保回调能定位并修改其状态
2. 跳转触发元素（html.A或dbc.Button）需设置n_clicks属性，作为回调的触发源
3. 通过callback_context可判断哪个元素被点击，从而返回对应的标签页ID

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