方法 - htmx.takeClass()

htmx.takeClass(element, className) 是一个 HTMX 提供的辅助函数，用于从页面上所有带有指定 class 的同级元素中移除该 class，并将其添加到你指定的 element 上。

常用于“选中”、“激活”、“当前标签高亮”这类 UI 效果的切换。

参数

• elt - 将添加类的元素
• class - 要添加的类

语法

htmx.takeClass(targetElement, "your-class-name");

示例代码

<style>
  .active {
    background-color: #007bff;
    color: white;
  }
</style>

<nav>
  <a href="/tab1" hx-get="/tab1" hx-target="#content" onclick="htmx.takeClass(this, 'active')">Tab 1</a>
  <a href="/tab2" hx-get="/tab2" hx-target="#content" onclick="htmx.takeClass(this, 'active')">Tab 2</a>
  <a href="/tab3" hx-get="/tab3" hx-target="#content" onclick="htmx.takeClass(this, 'active')">Tab 3</a>
</nav>

<div id="content"></div>

点击某个 Tab 链接时，发出 HTMX 请求，替换 #content 的内容，当前链接自动获得 active 类，其他的失效。

等效的原生 JavaScript

function takeClass(element, className) {
  document.querySelectorAll("." + className).forEach(el => {
    el.classList.remove(className);
  });
  element.classList.add(className);
}