如何在Streamlit中通过按钮或超链接实现标签页间跳转？

问题说明 #

你之前用的st.change_page是用于**多页面应用（不同.py文件）**的跳转，不适用于单页面内的st.tabs标签页；而st.button本身没有page参数，所以这两种写法都无效。下面提供两种可行的实现方式：

方法一：原生Streamlit按钮跳转（依赖会话状态） #

通过st.session_state记录当前激活的标签页索引，点击按钮时修改索引并触发页面重跑，实现标签页切换。

import streamlit as st

# 初始化会话状态：记录当前激活的标签页索引
if "active_tab" not in st.session_state:
    # 默认选中第一个标签页，根据你的实际标签顺序调整初始索引
    st.session_state.active_tab = 0

# 定义所有标签页名称
tab_names = [
    "首页",
    "Diabetes Prediction（糖尿病预测）",
    "高血压预测",
    "心脏病预测",
    "肝病预测",
    "肾病预测"
]

# 创建标签页容器
tabs = st.tabs(tab_names)

# 在任意需要添加跳转按钮的标签页中编写代码（示例：首页标签页）
with tabs[0]:
    st.title("多疾病预测系统")
    # 添加跳转按钮
    if st.button("点击此处跳转到糖尿病预测标签页"):
        # 修改会话状态为目标标签页的索引
        target_index = tab_names.index("Diabetes Prediction（糖尿病预测）")
        st.session_state.active_tab = target_index
        # 触发页面重跑，立即切换标签
        st.rerun()

# 根据会话状态渲染对应标签页的内容
with tabs[st.session_state.active_tab]:
    if st.session_state.active_tab == tab_names.index("Diabetes Prediction（糖尿病预测）"):
        st.title("糖尿病预测")
        # 这里编写糖尿病预测的业务代码
        st.write("请输入患者信息进行预测...")
    elif st.session_state.active_tab == 0:
        st.write("欢迎使用多疾病预测系统，请选择对应标签页开始检测")
    # ...其他标签页逻辑可按需补充

方法二：HTML超链接跳转（无页面重跑） #

通过HTML结合JavaScript直接操作Streamlit标签页的DOM元素，实现无刷新跳转，体验更流畅，但依赖Streamlit的DOM结构（若官方更新标签页的测试ID可能失效）。

import streamlit as st

# 创建标签页
tabs = st.tabs([
    "首页",
    "Diabetes Prediction（糖尿病预测）",
    "高血压预测",
    "心脏病预测",
    "肝病预测",
    "肾病预测"
])

# 在需要添加超链接的标签页中（示例：首页标签页）
with tabs[0]:
    st.title("多疾病预测系统")
    # 生成跳转超链接，注意修改索引为目标标签页的位置（从0开始计数）
    target_tab_index = 1  # 糖尿病预测是第二个标签页，索引为1
    st.markdown(
        f'<a href="javascript:void(0);" onclick="document.querySelectorAll(\'button[data-testid=\"stTab\"]\')[{target_tab_index}].click();" style="color: blue; text-decoration: underline;">点击此处跳转到糖尿病预测标签页</a>',
        unsafe_allow_html=True
    )

# 糖尿病预测标签页内容
with tabs[1]:
    st.title("Diabetes Prediction（糖尿病预测）")
    st.write("请输入患者信息进行预测...")

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