如何使用 Tailwind 在 Blazor 应用程序中单击后更改菜单项颜色 CSS

How to make menu item color change after click in Blazor app with Tailwind CSS

我已经开始使用 Tailwind CSS 构建 Blazor 服务器应用程序。我创建了具有新样式的水平菜单导航栏。但是我错过了一件事。在默认的 Blazor 模板中,当我单击菜单项时,它会更改背景颜色,直到单击其他菜单元素或更改路由组件页面 - 然后该页面菜单元素更改颜色,其他元素 return 为默认背景。我知道默认情况下它不会执行 bootstrap CSS 或 site.css。在代码中我找不到它。在_Host.cshtml中<script src="_framework/blazor.server.js"></script>完成了吗?

我已经尝试了一些解决方案,因为这两个 NavLinks:

        ...
        <ul class="@($"{menuVisibleClass} flex flex-col bg-gray-400 px-4 py-2 md:flex md:flex-row md:bg-transparent")">
            <NavLink @onclick="ToggleActive" class="@($"nav-item {activeClass}" )"  href="/">Home</NavLink>
            <NavLink class="@($"nav-item focus:bg-purple-400")" tabindex="-1" href="/fetchdata">Counter</NavLink>      
        </ul>
    </div>
    
    @code
    {
        ...
        private bool _active = false;
        string activeClass = "";
    
        private void ToggleActive()
        {
            _active = !_active;
            activeClass = _active ? " bg-purple-400" : "";
        }
        ...
    }

但当然不是。我认为 JavaScript (w3schools link) 中应该是这样的:

       <div id="myDIV">
          <button class="btn">1</button>
          <button class="btn active">2</button>
          <button class="btn">3</button>
        </div>
        
        <script>
        var header = document.getElementById("myDIV");
        var btns = header.getElementsByClassName("btn");
        for (var i = 0; i < btns.length; i++) {
          btns[i].addEventListener("click", function() {
          var current = document.getElementsByClassName("active");
          current[0].className = current[0].className.replace(" active", "");
          this.className += " active";
          });
        }
        </script>

有什么类似的东西可以实现吗?我应该从每个 NAvLink 的 onclick 事件中手动传递 id 还是其他解决方案是否合适?

编辑:我发现信息 (link) Bootstrap NavLink 根据其 href 是否与当前 URL 匹配来切换活动 CSS class ].但是使用 Tailwind CSS 生成的活动 class 我做不到。

@tailwind base;
@tailwind components;

.nav-item {
    @apply bg-gray-100 m-1 font-bold text-gray-700 px-4 py-2 rounded-sm shadow-lg;
}
.nav-item:hover {
    @apply bg-purple-300;
}
.nav-item:focus {
    @apply outline-none;
}

.nav-item:active {
    @apply bg-purple-500;
}

在 blazor 中,模板使用 NavLink 组件执行此操作。 NavLink 组件在根据当前导航位置以 href 开头或等于 href.

进行渲染时,在锚点对象上放置一个 class

在您的情况下,如果路线处于活动状态,您只需在元素上放置并激活 class。

<div id="myDIV">
          <button class="btn @GetActive("path1")">1</button>
          <button class="btn @GetActive("path2")">2</button>
          <button class="btn @GetActive("path3")">3</button>
</div>

@code {

    [Inject]
    NavigationManager NavigationManager { get; set; }

    protected override void OnInitialized() => NavigationManager.LocationChanged += (s, e) => StateHasChanged();

    bool IsActive(string href, NavLinkMatch navLinkMatch = NavLinkMatch.Prefix)
    {
        var relativePath = NavigationManager.ToBaseRelativePath(NavigationManager.Uri).ToLower();
        return navLinkMatch == NavLinkMatch.All ? relativePath == href.ToLower() : relativePath.StartsWith(href.ToLower());
    }

    string GetActive(string href, NavLinkMatch navLinkMatch = NavLinkMatch.Prefix) => IsActive(href, navLinkMatch) ? "active" : "";
}

Blazor“将 navLink 转换为简单的 link”,因此可以定义一些类似

a.active{@apply bg-purple-500}

或者你的

.nav-item.active{@apply bg-purple-500}

或使用ActiveClass并使用

.customActiveClass{@apply bg-purple-500}

但我无法想象如何使用 tailwinds

的伪类 :active