Jquery 如何将：active伪类应用于我的CSS代码？

我想在我的.blurb_underline类中添加一个：active伪类，该类应用于四个不同的对象blurb。基本上，我希望下划线在其中一个广告被点击后保持不变，也希望其中一个在页面加载时处于活动状态

.blurb_underline h4 {
  display: inline-block;
  position: relative;
  padding-bottom: 8px;
  font-size: 20px;
  font-weight: 400;
  -webkit-transition: all .5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}

.blurb_underline p {
  padding-top: 10px;
}

.blurb_underline h4:hover {
  color: #e02b20;
}

.blurb_underline h4:before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  transition: width 0s ease, background .5s ease;
}

.blurb_underline h4:after {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: #e02b20;
  transition: width .5s ease;
}

.blurb_underline h4:hover:before {
  width: 100%;
  background: #e02b20;
  transition: width .5s ease;
}

.blurb_underline h4:hover:after {
  width: 100%;
  background: transparent;
  transition: all 0s ease;
}

非常感谢：

以下是该部分的图像：

当用户当前单击元素时，将应用：活动伪选择器。那不是你想用的

如果您希望在“单击其中一个blurbs后”保持样式，最简单的方法是在单击时使用JavaScript中的事件添加另一个类

以下是一个工作片段：

//获取所有元素的简介 var blurbs=document.getelementsbyclassnamblurb\u下划线； //函数可从所有模糊中删除“活动”类 函数blurbsDeactivate{ []forEach.callBlurb，functionblurb{ blurb.classList.removeactive； }; } //为每个宣传语做以下操作 []forEach.callBlurb，functionblurb{ //点击任何广告，执行以下操作 blurb.addEventListener'click'，functionevent{ blurbsDeactivate；//启动函数以删除所有模糊上的“活动” this.classList.addactive；//在刚刚单击的类上添加“active”类 }; }; .blurb_下划线h4{ 显示：内联块； 位置：相对位置； 垫底：8px； 字体大小：20px； 字体大小：400； -webkit过渡：所有.5s的放松； -moz过渡：所有0.5s的缓变； -ms过渡：所有0.5s的缓解； -o型过渡：所有0.5s缓解； 过渡：所有0.5s缓解； } .blurb_下划线p{ 填充顶部：10px； } .blurb_下划线h4：之前{ 内容：； 显示：块； 位置：绝对位置； 左：0； 底部：0； 高度：2倍； 宽度：0； 过渡：宽度0s，背景。5s； } .blurb_下划线h4：之后{ 内容：； 显示：块； 位置：绝对位置； 右：0； 底部：0； 高度：2倍； 宽度：0； 背景：e02b20； 过渡：宽度。5s轻松； } .blurb_下划线h4：悬停， .blurb_underline.active h4{/*添加了此行*/ 颜色：e02b20； } .blurb_下划线h4：悬停：在， .blurb_underline.active h4:在{/*添加此行之前*/ 宽度：100%； 背景：e02b20； 过渡：宽度。5s轻松； } .blurb_下划线h4：悬停：之后， .blurb_underline.active h4:在{/*添加此行之后*/ 宽度：100%； 背景：透明； 过渡：一切顺利； } /*添加到增强代码段*/ .blurb_下划线{ 显示：内联块； 边际：0.8px； } B 1 h4 脱口而出

B 2 h4 脱口而出

B 3 h4 Blurb3 p

B4 h4 Blurb4 p

---

你能添加一些HTML来制作一个工作片段吗？blurb元素中的元素是什么？您还可以添加一个screeschot或一个图像，显示“我希望在单击其中一个blurb后下划线保持不变”-然后您不希望：活动，因为这仅适用于从按下鼠标按钮到再次释放鼠标按钮的那一刻。“而且对于一个在页面加载时处于活动状态的元素”-然后您需要使该元素与其他元素区分开来，例如通过添加一个处于活动状态的类。@Thomas当它改变DOM时，您可以尝试将该脚本放在结束标记之前。这确保在执行之前加载所有内容。如果不行，我不知道为什么。已经有很多东西和脚本了。