使用onclick时MudNavLink的active类设置位置错误问题咨询

问题出在你给MudNavLink设置Class属性的方式上——MudBlazor的MudNavLink组件内部是嵌套结构：外层是带mud-nav-item类的div容器，内层才是带mud-nav-link类的链接元素。你直接给MudNavLink加Class，默认是把类加到外层的div上，这就是为什么你看到active类出现在div而非链接元素上。

解决方法有两种，推荐第二种更贴合MudBlazor的设计：

• 方法一：用LinkClass参数替代Class，这个参数专门用来设置内层链接元素的样式类：

<MudNavMenu>
    <MudNavLink OnClick="@(e => ToggleActiveSection("Profile"))" LinkClass="@($"{(ActiveSection == "Profile" ? "active" : "")}")">Profile</MudNavLink>
    <MudNavLink OnClick="@(e => ToggleActiveSection("Security"))" LinkClass="@($"{(ActiveSection == "Security" ? "active" : "")}")">Security</MudNavLink>
</MudNavMenu>

• 方法二：利用MudNavLink自带的Active绑定参数，不用手动拼接类名，更简洁：

<MudNavMenu>
    <MudNavLink OnClick="@(e => ToggleActiveSection("Profile"))" Active="@(ActiveSection == "Profile")">Profile</MudNavLink>
    <MudNavLink OnClick="@(e => ToggleActiveSection("Security"))" Active="@(ActiveSection == "Security")">Security</MudNavLink>
</MudNavMenu>

这样修改后，激活状态的样式就会正确作用在mud-nav-link元素上，不用手动调整DOM了。

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