Blazor Server中Href路径不完整，仅用CSS控制Div显隐问题求助

我想仅用CSS实现点击a标签控制div的显示与隐藏。在普通HTML环境中，点击后URL正常显示为https://localhost:7078/panel/Invoicetest#start-menu-modal；但在Blazor Server项目里，点击后URL直接变成https://localhost:7078/#start-menu-modal，即使手动给a标签的href加上/panel/Invoicetest#start-menu-modal也无法解决。

原代码示例 #

HTML代码

<a href="#start-menu-modal" id="start-menu"><i class="fab fa-windows"></i></a>

CSS代码

#start-menu-modal {
    background: #005a9e;
    position: absolute;
    left: 0;
    bottom: 43px;
    height: 600px;
    color: white;
    visibility: hidden;
    display: grid;
    grid-template-columns: 50px 250px 400px;
    cursor: default;
}

#start-menu-modal:target {
    visibility: visible !important;
    animation-name: open;
    animation-duration: 0.1s;
    transition: 0.1s;
}

@keyframes open {
    0% {
        height: 550px;
        opacity: 0.5;
    }

    100% {
        height: 600px;
        opacity: 1;
    }
}

问题根源 #

Blazor Server的路由系统会拦截所有导航行为，包括锚点跳转，默认会将导航路径重置到应用根目录，导致原本的相对路径锚点失效，无法触发:target伪类的样式规则。

解决方案 #

方案1：改用Checkbox触发（纯CSS无JS）

放弃锚点跳转逻辑，用隐藏的checkbox配合label实现点击控制，完全绕开Blazor的路由拦截：

<!-- 隐藏的checkbox作为状态触发器 -->
<input type="checkbox" id="start-menu-toggle" class="toggle-checkbox" />
<!-- 用label替代原a标签，点击会触发checkbox状态切换 -->
<label for="start-menu-toggle" id="start-menu"><i class="fab fa-windows"></i></label>

<div id="start-menu-modal">
    <!-- 模态框内容 -->
</div>

调整对应的CSS：

.toggle-checkbox {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

#start-menu {
    cursor: pointer;
}

#start-menu-modal {
    background: #005a9e;
    position: absolute;
    left: 0;
    bottom: 43px;
    height: 600px;
    color: white;
    visibility: hidden;
    display: grid;
    grid-template-columns: 50px 250px 400px;
    cursor: default;
}

<!-- 用checkbox的checked状态替代target伪类 -->
.toggle-checkbox:checked ~ #start-menu-modal {
    visibility: visible;
    animation-name: open;
    animation-duration: 0.1s;
    transition: 0.1s;
}

@keyframes open {
    0% {
        height: 550px;
        opacity: 0.5;
    }

    100% {
        height: 600px;
        opacity: 1;
    }
}

方案2：手动控制锚点导航（保留:target逻辑）

通过Blazor的NavigationManager手动拼接路径和锚点，避免路由系统重置路径：

@inject NavigationManager NavManager

<a @onclick="HandleStartMenuClick" id="start-menu"><i class="fab fa-windows"></i></a>

@code {
    private void HandleStartMenuClick()
    {
        // 获取当前页面路径，拼接锚点后跳转
        var currentPath = NavManager.Uri.Split('#')[0];
        NavManager.NavigateTo($"{currentPath}#start-menu-modal", forceLoad: false);
    }
}

这种方式可以保留原有的:target CSS逻辑，同时确保URL路径正确。

方案3：配置Blazor路由（有限生效）

在Program.cs中调整路由配置，尝试让Blazor不拦截锚点跳转：

builder.Services.AddServerSideBlazor(options =>
{
    options.DetailedErrors = true;
});

// 配置导航选项，允许保留当前路径的锚点跳转
builder.Services.Configure<NavigationOptions>(options =>
{
    options.PreventLoad = false;
});

注意：这种方式受Blazor路由机制限制，部分场景下可能依然无法完全生效，优先级低于前两种方案。

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