Blazor WASM无需使用JavaScript操作DOM实现标签页状态切换方案

实现方案 #

Blazor本身是数据驱动视图的框架，这类样式切换的需求完全不需要手动操作DOM，也不需要写JS代码，只需要通过状态绑定类名即可实现。

步骤1：定义状态存储当前激活的标签索引

在组件的@code块中定义一个字段存储当前激活的标签索引，默认值设置为初始激活的标签下标：

@code {
    // 默认激活第一个标签
    private int _activeTabIndex = 0;

    private void TabClicked(int index)
    {
        _activeTabIndex = index;
    }
}

步骤2：绑定class属性实现动态样式切换

你可以选择两种写法适配你的场景：

写法1：静态结构直接绑定（不用修改原有标签结构）

直接给每个标签的class属性加判断逻辑，判断当前标签的索引是否等于激活的索引，等于就加active类：

<ul id="cii-tabmenu" class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link @(_activeTabIndex == 0 ? "active" : string.Empty)" 
           data-tabIndex="0" 
           href="#" 
           @onclick="() => TabClicked(0)"
           @onclick:preventDefault>
            Mål og investeringspolitik
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link @(_activeTabIndex == 1 ? "active" : string.Empty)" 
           data-tabIndex="1" 
           href="#" 
           @onclick="() => TabClicked(1)"
           @onclick:preventDefault>
            Risk-reward-profil
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link @(_activeTabIndex == 2 ? "active" : string.Empty)" 
           data-tabIndex="2" 
           href="#" 
           @onclick="() => TabClicked(2)"
           @onclick:preventDefault>
            Gebyrer
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link @(_activeTabIndex == 3 ? "active" : string.Empty)" 
           data-tabIndex="3" 
           href="#" 
           @onclick="() => TabClicked(3)"
           @onclick:preventDefault>
            Tidligere resultater
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link @(_activeTabIndex == 4 ? "active" : string.Empty)" 
           data-tabIndex="4" 
           href="#" 
           @onclick="() => TabClicked(4)"
           @onclick:preventDefault>
            Praktiske oplysninger
        </a>
    </li>
</ul>

这里加@onclick:preventDefault是为了阻止a标签默认的跳转行为，不需要额外处理href属性。

写法2：循环渲染（适合标签数量多、动态生成的场景）

如果后续标签可能动态变化，建议把标签项抽成数据源循环渲染，代码更简洁：

<ul id="cii-tabmenu" class="nav nav-tabs">
    @foreach (var tab in _tabList)
    {
        <li class="nav-item">
            <a class="nav-link @(_activeTabIndex == tab.Index ? "active" : string.Empty)" 
               data-tabIndex="@tab.Index" 
               href="#" 
               @onclick="() => TabClicked(tab.Index)"
               @onclick:preventDefault>
                @tab.Name
            </a>
        </li>
    }
</ul>

@code {
    private List<TabItem> _tabList = new()
    {
        new TabItem { Index = 0, Name = "Mål og investeringspolitik" },
        new TabItem { Index = 1, Name = "Risk-reward-profil" },
        new TabItem { Index = 2, Name = "Gebyrer" },
        new TabItem { Index = 3, Name = "Tidligere resultater" },
        new TabItem { Index = 4, Name = "Praktiske oplysninger" }
    };

    private int _activeTabIndex = 0;

    private void TabClicked(int index)
    {
        _activeTabIndex = index;
    }

    public class TabItem
    {
        public int Index { get; set; }
        public string Name { get; set; }
    }
}

实现原理

Blazor会自动跟踪组件内状态的变化，当你点击标签更新_activeTabIndex的值时，Blazor会自动重新计算所有绑定了该状态的class属性，自动给当前匹配的标签添加active类，移除上一个匹配标签的active类，全程不需要手动操作DOM，也不需要引入任何JS代码。

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