需求描述
在用户单击标签后需要“高亮”该标签,例如:网站导航栏中的各项,在单击某项之后需要将其“高亮”以表明当前正在浏览的项目。
实现思路
专门用一个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');
}
}
}