Dash应用中通过URI片段实现选项卡间导航与同步

import dash
from dash import dcc, html, Input, Output, no_update, ctx
import dash_bootstrap_components as dbc

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

# dcc.Location 组件用于管理URL状态
location = dcc.Location(id='url')

# 选项卡内容
tab1_content = dbc.Markdown('''
### 这是选项卡 1
这是一个关于选项卡1的描述。
[点击这里前往选项卡2](#tab-2)
''')

tab2_content = dbc.Markdown('''
### 这是选项卡 2
这是一个关于选项卡2的描述。
[点击这里前往选项卡1](#tab-1)
''')

# 定义选项卡布局
tabs_component = dbc.Tabs(
    [
        dbc.Tab(tab1_content, label='选项卡 1', tab_id='tab-1'),
        dbc.Tab(tab2_content, label='选项卡 2', tab_id='tab-2'),
    ],
    id='tabs',
    active_tab='tab-1' # 初始激活的选项卡
)

app.layout = html.Div([
    location,
    html.H1("Dash 选项卡导航示例"),
    tabs_component
])

@app.callback(
    Output('url', 'hash'),          # 输出：更新URL的哈希值
    Output('tabs', 'active_tab'),   # 输出：更新当前激活的选项卡
    Input('url', 'hash'),           # 输入：监听URL的哈希值变化
    Input('tabs', 'active_tab'),    # 输入：监听当前激活的选项卡变化
    config_prevent_initial_callbacks=True # 防止初始加载时触发回调
)
def handle_navigation(fragment, active_tab_id):
    triggered_id = ctx.triggered_id # 获取触发回调的组件ID

    # 如果是dcc.Location的hash属性触发了回调
    if triggered_id == 'url':
        if fragment:
            # 从URI片段中提取tab_id（去除开头的'#'）
            new_tab_id = fragment[1:]
            # 如果提取到的tab_id与当前active_tab_id不同，则更新active_tab
            if new_tab_id != active_tab_id:
                return no_update, new_tab_id # 只更新active_tab
        return no_update, no_update # 如果没有片段或无需更新，则不改变任何状态

    # 如果是dbc.Tabs的active_tab属性触发了回调（用户点击了选项卡）
    elif triggered_id == 'tabs':
        if active_tab_id:
            # 根据当前激活的选项卡ID构建新的URI片段
            new_fragment = f"#{active_tab_id}"
            # 如果新构建的片段与当前URL片段不同，则更新URL哈希
            if new_fragment != fragment:
                return new_fragment, no_update # 只更新URL哈希
        return no_update, no_update # 如果没有active_tab_id或无需更新，则不改变任何状态

    return no_update, no_update # 默认不更新

import dash
from dash import dcc, html, Input, Output, no_update, ctx
import dash_bootstrap_components as dbc

# 初始化Dash应用
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

# dcc.Location 组件用于管理URL状态
location = dcc.Location(id='url')

# 选项卡内容
tab1_content = dbc.Markdown('''
### 这是选项卡 1
<p>欢迎来到第一个选项卡。在这里您可以找到关于功能A的信息。</p>
<p>[点击这里前往选项卡2](#tab-2)</p>
''')

tab2_content = dbc.Markdown('''
### 这是选项卡 2
<p>欢迎来到第二个选项卡。在这里您可以找到关于功能B的信息。</p>
<p>[点击这里前往选项卡1](#tab-1)</p>
''')

# 定义选项卡布局
tabs_component = dbc.Tabs(
    [
        dbc.Tab(tab1_content, label='选项卡 1', tab_id='tab-1'),
        dbc.Tab(tab2_content, label='选项卡 2', tab_id='tab-2'),
    ],
    id='tabs',
    active_tab='tab-1' # 初始激活的选项卡
)

# 应用布局
app.layout = html.Div([
    location,
    html.H1("Dash 选项卡间导航与同步教程"),
    tabs_component,
    html.Hr(),
    html.P("当前URL哈希值: "),
    html.Div(id='current-hash-display')
])

# 回调函数：同步URL哈希和选项卡状态
@app.callback(
    Output('url', 'hash'),
    Output('tabs', 'active_tab'),
    Input('url', 'hash'),
    Input('tabs', 'active_tab'),
    config_prevent_initial_callbacks=True
)
def handle_navigation(fragment, active_tab_id):
    triggered_id = ctx.triggered_id

    # 如果是dcc.Location的hash属性触发了回调 (用户通过URL或链接导航)
    if triggered_id == 'url':
        if fragment and fragment.startswith('#'):
            new_tab_id = fragment[1:] # 移除'#'
            # 只有当新tab_id与当前active_tab_id不同时才更新
            if new_tab_id != active_tab_id:
                return no_update, new_tab_id
        return no_update, no_update # 没有有效的hash或无需更新

    # 如果是dbc.Tabs的active_tab属性触发了回调 (用户点击了选项卡)
    elif triggered_id == 'tabs':
        if active_tab_id:
            new_fragment = f"#{active_tab_id}"
            # 只有当新fragment与当前URL fragment不同时才更新
            if new_fragment != fragment:
                return new_fragment, no_update
        return no_update, no_update # 没有active_tab_id或无需更新

    return no_update, no_update # 默认不更新

# 可选：显示当前的URL哈希值，方便调试
@app.callback(
    Output('current-hash-display', 'children'),
    Input('url', 'hash')
)
def display_current_hash(hash_value):
    return hash_value if hash_value else "无"

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