如何制作伪元素：保持活跃状态​​？

Question

我目前正在努力制作我的psuedo元素：点击之前保持活跃状态​​。

我已经在这里做了一个小演示： https://jsfiddle.net/ud8p2nak/1/

我希望它在您当前页面上保持活动状态，因此，如果我在帐户页面上，我希望我的伪元素在“帐户”页面上保持活动状态。我尝试过：主动但不完全保持活跃状态​​。我很感激你的帮助，谢谢你。

Raster

<div class="side_col">

    <a href="#">
      <div class="side_link">Accounts
      </div>
    </a>
    <a href="#">
      <div class="side_link">Newsletter
      </div>
    </a>
    <a href="#">
      <div class="side_link">Operator
      </div>
    </a>
    <a href="#">
      <div class="side_link">Invoice
      </div>
    </a>

Answer 1

更新

OP询问是否可以使用:target并附加<a>。是的，请参阅此测试并单击名为“发票”的最后一个链接。

FIDDLE

CSS解决方案正在使用:target伪类。这很简单：

1. 为要更改状态的元素（开，关，活动，非活动等）分配一个id，这将被称为目标。
2. 接下来，制作<a> nchor并将其href值分配给目标的ID，前面带有#哈希标记（例如<a href='#idOfTarget'>LINK</a>）。
3. 最后，使用目标和:target伪类创建一个CSS规则集（例如#idOfTarget:target { color: red; }。

段

.side_col {
  float: left;
  width: 20%;
  height: 100%;
  background-color: #343A47;
}
.side_link:before {
  float: left;
  content: "";
  display: inline-block;
  height: 100%;
  width: 7px;
  background-color: #343A47;
}
#sl1:target:before,
#sl2:target:before,
#sl3:target:before,
#sl4:target:before {
  background-color: #24BDE9;
}
.side_link {
  text-align: left;
  line-height: 50px;
  width: 100%;
  height: 50px;
  background: #343A47;
  color: #fff;
  font-weight: 500;
}
.side_link:hover {
  background-color: #2b303b;
}

<div class="side_col">

  <a href="#sl1">
    <div id="sl1" class="side_link">Accounts
    </div>
  </a>
  <a href="#sl2">
    <div id="sl2" class="side_link">Newsletter
    </div>
  </a>
  <a href="#sl3">
    <div id="sl3" class="side_link">Operator
    </div>
  </a>
  <a href="#sl4">
    <div id="sl4" class="side_link">Invoice
    </div>
  </a>

</div>

Answer 2

:active伪类是链接的状态。按住鼠标按钮时应用它。您无法使用它来引用活动页面。

要解决您的问题，您应该编写一个小脚本，以便为链接应用唯一标识符（ID或类名）。这样的事情：https://jsfiddle.net/Nekomajin42/emajn64f/5/

注意修改后的HTML和CSS！ JS如下：

window.addEventListener("DOMContentLoaded", function()
{
    var activepage = location.pathname;
    document.getElementById(activepage).classList.add("active");
});

工作原理

假设您的信息页为example.com！当您单击导航栏中的第一个链接时，您将转到example.com/accounts。

加载页面时，会触发DOMContentLoaded事件，该事件会调用事件侦听器中的函数。您从URL（location.pathname）获取当前子页面，然后在DOM中查找与ID具有相同字符串的元素。如果找到它，则分配.active类，CSS将完成其余的工作。

请注意，JS代码在小提琴中不起作用，因为你实际上没有加载页面，但是如果你在源代码中使用它就没问题。 < / p>

Answer 3

您必须向希望div处于有效状态的::before添加额外的课程。你不能像你使用的那样申请:active。我的意思是你可以申请:active但是在你的情况下它不会起作用，因为当你点击DOM中的另一个元素时它就会失效。

你必须这样做

＆＃13;

＆＃13;

.side_col {
  float: left;
  width: 20%;
  height: 100%;
  background-color: #343A47;
}
.side_link{
  position:relative;
  padding-left:30px;
}
.side_link:before {
  float: left;
  content: "";
  display: inline-block;
  height: 100%;
  width: 7px;
  left:0px;
  background-color: #333;
  position:absolute;
}

.side_link.active::before {
  background-color: #24BDE9;
}

.side_link {
  text-align: left;
  line-height: 50px;
  width: 100%;
  height: 50px;
  background: #343A47;
  color: #fff;
  font-weight: 500;
}

.side_link:hover {
  background-color: #2b303b;
}

＆＃13;

<div class="side_col">

    <a href="#">
      <div class="side_link">Accounts
      </div>
    </a>
    <a href="#">
      <div class="side_link active">Newsletter
      </div>
    </a>
    <a href="#">
      <div class="side_link">Operator
      </div>
    </a>
    <a href="#">
      <div class="side_link">Invoice
      </div>
    </a>

  </div>

＆＃13;

＆＃13;

＆＃13;