Blazor项目中实现导航active类切换、激活项切换及对应窗口展示的方法

你可以直接使用Blazor原生的数据绑定能力实现所有需求，无需额外编写JavaScript代码，具体实现方案如下：

首先修正你原有代码中的两处笔误：

1. HTML外层div的classe属性拼写错误，应为class
2. CSS中.windowHome .windowInfo为后代选择器，如果你需要给两个类同时设置样式，应改为.windowHome, .windowInfo

修改后的完整代码 #

CSS部分

.mywin {
    width: 300px;
    height: 150px;
}

.navigation {
    width: 100px;
    height: 100%;
}

.ItemActive {
    border-radius: 5px;
    background: red;
}

.navigation.active {
    width: 50px;
}

/* 修正选择器，补充窗口显隐样式 */
.windowHome, .windowInfo {
    right: 0;
    width: 200px;
    height: 100%;
    display: none;
}
.windowHome.active, .windowInfo.active {
    display: block;
}

Razor页面部分

<div class="mywin">
    <!-- 按钮点击切换导航折叠状态 -->
    <button type="button" @onclick="() => IsNavCollapsed = !IsNavCollapsed">Click Me!</button>
    <!-- 动态绑定navigation的active类 -->
    <div class="@($"navigation {(IsNavCollapsed ? "active" : "")}")">
        <ul>
            <li class="@(ActiveNavItem == "Home" ? "ItemActive" : "")">
                <a href="#" @onclick="() => ActiveNavItem = "Home"" @onclick:preventDefault>
                    <i class="fas fa-home icon"/><span>Home</span>
                </a>
            </li>
            <li class="@(ActiveNavItem == "Info" ? "ItemActive" : "")">
                <a href="#" @onclick="() => ActiveNavItem = "Info"" @onclick:preventDefault>
                    <i class="fas fa-bell icon"/><span>Info</span>
                </a>
            </li>
        </ul>
        <!-- 动态绑定窗口显示状态 -->
        <div class="@($"windowHome {(ActiveNavItem == "Home" ? "active" : "")}")">
            ....
        </div>
        <div class="@($"windowInfo {(ActiveNavItem == "Info" ? "active" : "")}")">
            ....
        </div>
    </div>
</div>

@code {
    // 控制导航栏折叠状态的变量
    private bool IsNavCollapsed { get; set; } = false;
    // 记录当前激活的导航项，默认激活Home
    private string ActiveNavItem { get; set; } = "Home";
}

功能实现逻辑说明 #

• 点击按钮时会切换IsNavCollapsed布尔值，通过字符串插值动态绑定navigation元素的class，实现active类的自动添加/移除
• 点击导航项时修改ActiveNavItem的值，对应li元素会自动判断当前激活项，动态绑定ItemActive类，无需手动移除旧激活项的样式
• 窗口元素同样通过判断ActiveNavItem的值动态绑定显示类，实现对应窗口的切换展示

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