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

Question

我已经开始用Tailwind CSS构建Blazor服务器应用程序。我用新样式创建了水平菜单导航栏。但有一件事我错过了。在默认的Blazor模板中，当我单击菜单项时，它会改变背景颜色，直到单击其他菜单元素或更改路由组件页面-然后该页面菜单元素会改变颜色，其他元素会返回到默认背景。我知道它不是默认的引导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链接(：

<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，或者其他解决方案是合适的吗？

edit：我发现信息(链接(，通过Bootstrap NavLink可以根据其href是否与当前URL匹配来切换活动的CSS类。但是使用由Tailwind CSS生成的活动类，我无法做到这一点

@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;
}

Answer 1

在blazor中，模板使用NavLink组件来完成此操作。NavLink组件在根据当前导航位置以href开始还是等于href来渲染锚对象时，将类放置在锚对象上。

在您的情况下，如果路由是活动的，您只需要在元素上放置一个活动类。

<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" : "";
}

Answer 2

Blazor"将navLink转换为简单链接"；，所以可以定义一些像

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

或者你的

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

或者使用ActiveClass并使用

.customActiveClass{@apply bg-purple-500}

但我无法想象如何使用顺风的伪类:active