HTML标签单击之后维持active状态

HTML标签单击之后维持active状态需求描述实现思路示例代码需求描述在用户单击标签后需要“高亮”该标签，例如：网站导航栏中的各项，在单击某项之后需要将其“高亮”以表明当前正在浏览的项目。实现思路专门用一个CSS类来实现维持样式，例如可以将该类取名为active（模仿:active伪类），在单击事件回调函数中将该标签元素增加active类，并将其余标签元素去掉active类示例代码//HTML&

blingbling_110

11526人浏览 · 2021-05-20 16:15:34

blingbling_110 · 2021-05-20 16:15:34 发布

需求描述

在用户单击标签后需要“高亮”该标签，例如：网站导航栏中的各项，在单击某项之后需要将其“高亮”以表明当前正在浏览的项目。

实现思路

专门用一个CSS类来实现维持样式，例如可以将该类取名为active（模仿:active伪类），在单击事件回调函数中将该标签元素增加active类，并将其余标签元素去掉active类

示例代码

<!--HTML-->

<div class="tab" id="1" onclick="clickTab(this)">tab1</div>
<div class="tab" id="2" onclick="clickTab(this)">tab2</div>

/* CSS */

.tab:active {  /* :active伪类 */
  color: red;
}

.tab.active {  /* active类 */
  color: red;
}

//JavaScript

/**
 * 标签单击事件的回调函数
 * @param node - 调用节点（标签）
 */
function clickTab(node) {
  node.classList.add('active');
  for (const tab of document.getElementsByClassName('tab')) {
    if (tab.id !== node.id) {
      tab.classList.remove('active');
    }
  }
}