Blazor中如何通过onclick传事件参数获取ID实现高亮标签系统

你的代码存在两个核心问题：

1. @onclick="() => SelectTab(e)"中的e未定义，且Blazor的EventArgs不包含id属性，无法通过它获取元素ID；
2. 第二个按钮的选中状态判断错误，应该匹配tab2而非tab1。

Blazor是基于状态驱动的框架，不需要像JS那样依赖DOM元素属性来实现标签切换，直接通过管理状态即可完成高亮逻辑，以下是修正后的完整代码：

@page "/store"

<PageTitle>Store</PageTitle>

<style>
    .tab-button {
        background-color: #ccc;
        color: #333;
    }

    /* CSS for selected buttons/tabs */
    .tab-button.selected {
        background-color: #007bff;
        color: #fff;
    }
</style>

<div class="h-screen">
    <div class="flex h-full">
        <section class="hidden md:grid md:grid-rows-nav bg-slate-600 h-full min-w-[250px] border-r-2 border-black border-solid h-full">
            <NavMenu />
        </section>

        <main class="relative w-full h-full grid">
            <h3>Store</h3>
            <div>
                <!-- 直接传递标签标识，绑定正确的选中判断 -->
                <button id="abc" class="tab-button @(selectedTab == "tab1" ? "selected" : "")" @onclick="() => SelectTab("tab1")">Tab 1</button>
                <button id="xyz" class="tab-button @(selectedTab == "tab2" ? "selected" : "")" @onclick="() => SelectTab("tab2")">Tab 2</button>
            </div>
            <div>
                @if (selectedTab == "tab1")
                {
                    <p>Content for Tab 1</p>
                }
                else if (selectedTab == "tab2")
                {
                    <p>Content for Tab 2</p>
                }
            </div>
        </main>
    </div>
</div>

@code {
    private string selectedTab = "tab1";

    // 接收标签标识参数，直接更新状态
    private void SelectTab(string tabId)
    {
        selectedTab = tabId;
        // 如果需要用到元素ID，可以在这里建立tabId和DOM id的映射，比如：
        // string domId = tabId switch { "tab1" => "abc", "tab2" => "xyz", _ => "" };
    }
}

核心思路说明 #

• 点击按钮时直接传递对应的标签标识（如tab1、tab2），而非依赖DOM元素；
• 通过selectedTab状态变量控制按钮的selected类和内容区域的显示；
• 完全遵循Blazor状态驱动的设计模式，避免直接操作DOM，代码更简洁易维护。

如果确实需要获取DOM元素的ID或进行DOM操作，可以通过ElementReference结合JSInterop实现，但对于标签高亮场景，上述状态驱动的方式是最优解。

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