单击时更改标签的样式答案

【问题标题】：Changing style of a-tag on click单击时更改标签的样式
【发布时间】：2021-08-26 21:57:17
【问题描述】：

我正在尝试找到一种方法，当单击以下链接之一时，类似于 Bootstrap 中的 nav-tabs 类，当前链接样式更改为 active 样式并且先前单击的链接恢复正常风格。 Bootstrap 5 有快速改变样式的方法还是需要通过普通的 CSS/JS 来完成？

<ul class="nav nav-pills flex-column">
   <li><a class="nav-link link-light" asp-controller="Home" asp-action="Index" asp-route-SortString="Award" asp-route-StatusId="@Context.Request.Query["StatusId"]">Highest Awarded</a></li>
   <li><a class="nav-link link-light" asp-controller="Home" asp-action="Index" asp-route-SortString="Update" asp-route-StatusId="@Context.Request.Query["StatusId"]">Last Updated</a></li>
   <li><a class="nav-link link-light" asp-controller="Home" asp-action="Index" asp-route-SortString="Newest" asp-route-StatusId="@Context.Request.Query["StatusId"]">Date Added (Newest)</a></li>
   <li><a class="nav-link link-light" asp-controller="Home" asp-action="Index" asp-route-SortString="Oldest" asp-route-StatusId="@Context.Request.Query["StatusId"]">Date Added (Oldest)</a></li>
</ul>

因此，例如，如果我点击 Highest Awarded，之前点击的链接会恢复为正常样式，并且 Highest Awarded 链接会在其类中添加 active，因此将样式更改为active 的样式。

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-5

【解决方案1】：

$("ul li").on("click",function(){
  $(this).addClass("active").siblings().removeClass("active")
})

.active{
   color:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav nav-pills flex-column">
   <li><a class="nav-link link-light" asp-controller="Home" asp-action="Index" asp-route-SortString="Award" asp-route-StatusId="@Context.Request.Query["StatusId"]">Highest Awarded</a></li>
   <li><a class="nav-link link-light" asp-controller="Home" asp-action="Index" asp-route-SortString="Update" asp-route-StatusId="@Context.Request.Query["StatusId"]">Last Updated</a></li>
   <li><a class="nav-link link-light" asp-controller="Home" asp-action="Index" asp-route-SortString="Newest" asp-route-StatusId="@Context.Request.Query["StatusId"]">Date Added (Newest)</a></li>
   <li><a class="nav-link link-light" asp-controller="Home" asp-action="Index" asp-route-SortString="Oldest" asp-route-StatusId="@Context.Request.Query["StatusId"]">Date Added (Oldest)</a></li>
</ul>

这是一个简单的 jquery 解决方法，您也可以使用 vanilla JS 来实现它。您可以为 active 类添加所需的样式。我不认为我们只能使用引导程序来实现这一点，除了 5.0。看不懂的可以留言。

【讨论】：

【解决方案2】：

参考https://getbootstrap.com/docs/5.0/components/navs-tabs/#javascript-behavior

您可以使用 Bootstrap 的选项卡来隐藏/显示具有数据属性的元素。如果您查看链接中的示例，则第一个 <button> 具有数据属性 data-bs-toggle="tab" data-bs-target="#home"。这对应于 ID 为 home 的 tab-pane。

【讨论】：