删除没有值的 HTML 属性

Question

我有一个 R闪亮应用程序，带有 R闪亮包中的导航栏。 但是，我对输出 HTML 感兴趣，因此这里不需要 R 特定知识。

如果先前已选择过这些选项卡，则通过此导航栏进行 Tab 键切换会跳过这些条目。这是因为，当选择一个选项卡时，shiny 会将 class="active" 添加到导航栏中该选项卡的

元素。然后，当您单击该选项卡时，它会删除 ="active"，只剩下

。根据空类属性是否有效 HTML？这是无效的 HTML，这一定是通过导航栏进行 Tab 键切换失败的原因

我想删除这些没有值的类目标。我尝试使用 jquery 通过添加来做到这一点

$(document).on('hide.bs.tab', (x) => {
    $('*[class!=*]').removeAttr('class');

每当选择新选项卡时删除所有这些目标。然而，我认为这会造成一些额外的混乱，因为应用程序中的其他功能现在已被破坏 - 可以预见，这是一种非常暴力的方法。问题是这个 HTML 无效，我不知道如何正确选择它！

如果有人可以就解决此问题的策略提出建议，那就太好了。谢谢！

Answer 1

对空类使用属性[]选择器，例如：[class=""]

$('[class=""]').removeAttr("class");

[class] {
  background: red;
}

<div class="foo">class="foo"</div>
<div class="">class=""</div>
<div class>class</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

在纯 JavaScript 中，你会这样做：

document.querySelectorAll('[class=""]').forEach(el => el.removeAttribute("class"));

[class] {
  background: red;
}

<div class="foo">class="foo"</div>
<div class="">class=""</div>
<div class>class</div>

无需加载整个库。