需求描述

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

实现思路

专门用一个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');}}
}

HTML标签单击之后维持active状态相关推荐

【 jQuery 】利用 jQuery 选择器实现表格的全选，取消选择，单击更改选中状态，反选等功能，为表格添加光棒效果
利用 jQuery 选择器实现表格的全选,取消选择,单击更改选中状态,反选等功能.如图所示.点击全选按钮,选中所有行,点击取消按钮,所有行为未选中状态,单击反选按钮,则选中的行变成未选中的: 未选 ...
a标签的四种链接状态
<span style="font-size:18px;"><style type="text/css">a:link{color:re ...
Bootstrap4 导航active状态切换
页面HTML代码: <ul id="menu" class="nav nav-tabs nav-pills nav-fill"><li cla ...
QPushButton/QLabel在鼠标悬浮（划过， hover）、选中（单击， pressed）状态下更换图标样式
环境配置 :MinGW + QT 5.12 三种图标样式(从左往右分别是normal,hover,pressed): 先上效果图: 1. 样式表第一种方法:在样式表中设置 border-image( ...
oracle实例恢复 redo,ORACLE不完全恢复之current或active状态redo损坏(二)
完全恢复:是指介质恢复阶段(即执行recover命令时)必须应用所有的应该应用的重做记录:它们包括从数据文件头中的检查点RBA所指向的重做记录开始,一直到在线的当前的重做日志的最新一条记录结束,不论 ...
【教程】超漂亮的CSS3按钮制作教程
利用CSS3属性制作按钮,我们只需要用到Gradient属性,不用使用任何图片素材和JavaScript代码,仅仅通过CSS就能制作出好看的渐变按钮.按钮的大小可以通过CSS属性就能轻松的修改,而且 ...
CSS3 排版属性盒子模型第二个模块
第05章-CSS3排版属性 CSS3排版属性第05章-CSS3排版属性学习目标 CSS 列表案例01 CSS 隐藏隐藏元素 CSS 显示属性案例03 CSS 表格案例04 表格隔行色案例 ...
Weblogic 线程的几种状态 - STUCK，ACTIVE，STANDBY - 你了解它们的含义吗
文章目录 1. STUCK 2. HOGGER 3. ACTIVE 4. STANDBY 5. IDLE Oracle Fusion Middleware.Oracle Enterprise Mana ...
EPC C1G2标准下的标签状态转换仿真
原理: 通过python实现: import random import time import threadingclass Reader_king():def __init__(self, ack ...

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

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

需求描述

实现思路

示例代码

HTML标签单击之后维持active状态相关推荐

最新文章

热门文章