你如何让一个 div 有一个活跃的或访问的风格？

Question

我试图让我的导航在活动导航时变大并变成橙色，但是在点击它之后会出现设计显示然后返回到默认的未点击设计。

这是我的代码：

a.urlCount {
    @include circle (20px, $white, inline-block);
    margin: 10px;
    border: solid 1px;
    border-color: $gray;
    text-align: center;
    color: $gray;
    font-size: 12px;
}

a.urlCount:hover{
    @include circle (20px, #f56c2f, inline-block);
    margin: 10px;
    border: solid 1px;
    border-color: #f56c2f;
    text-align: center;
    color: $white;
    font-size: 12px;
}

a.urlCount:visited{
    @include circle (23px, #f56c2f, inline-block);
    margin: 10px;
    border: solid 1px;
    border-color: #f56c2f;
    text-align: center;
    color: $white;
    font-size: 16px;
}

a.urlCount:active{
    @include circle (23px, #f56c2f, inline-block);
    margin: 10px;
    border: solid 1px;
    border-color: #f56c2f;
    text-align: center;
    color: $white;
    font-size: 16px;
}

a.urlCount--active{
    @include circle (23px, #f56c2f, inline-block);
    margin: 10px;
    border: solid 1px;
    border-color: #f56c2f;
    text-align: center;
    color: $white;
    font-size: 16px;
}

<div class="urlNavigation">
    <span class="navTitle text__bold">SCAN RESULT OF URL</span>
  <a class="urlCount text__bold" [routerLinkActive]="'urlCount--active'" (click)="initializeTableData(1)">{{ 1 }}</a>
  <a class="urlCount text__bold" (click)="initializeTableData(2)">{{ 2 }}</a>
</div>

Answer 1

您可以使用 Javascript 或 jQuery 来实现这一点，方法是向单击的元素添加一个类并为该类定义所需的 CSS 样式。

---

Javascript

首先，您必须遍历所有 .urlCount 元素以附加事件侦听器（及其处理程序）。

在处理程序中，首先从先前活动的元素中删除该类很重要。为了防止在没有元素处于活动状态的情况下出现错误，您需要先检查是否存在这样的活动元素。或者，您可以在 for 循环中遍历所有 .urlCount 元素并从每个元素中删除该类。

if (!!document.querySelector('.active')) {
  document.querySelector('.active').classList.remove('active');
}

使用!!（双重否定）将值转换为布尔值，例如undefined 转换为false 或（现有）object 转换为true

最后你只需要将.active 类添加到点击的元素：

this.classList.add('active');

工作示例：

let links = document.querySelectorAll('.urlCount');

for (i = 0; i < links.length; i++) {
  links[i].addEventListener('click', function() {
    if (!!document.querySelector('.active')) {
      document.querySelector('.active').classList.remove('active');
    }
    this.classList.add('active');
  });
}

a.urlCount {
  @include circle (20px, $white, inline-block);
  margin: 10px;
  border: solid 1px;
  border-color: $gray;
  text-align: center;
  color: $gray;
  font-size: 12px;
}

a.urlCount:hover {
  @include circle (20px, #f56c2f, inline-block);
  margin: 10px;
  border: solid 1px;
  border-color: #f56c2f;
  text-align: center;
  color: $white;
  font-size: 12px;
}

a.urlCount.active {
  @include circle (23px, #f56c2f, inline-block);
  margin: 10px;
  border: solid 1px;
  border-color: #f56c2f;
  text-align: center;
  color: $white;
  font-size: 16px;
}

<div class="urlNavigation">
  <span class="navTitle text__bold">SCAN RESULT OF URL</span>
  <a class="urlCount text__bold" [routerLinkActive]="'urlCount--active'" (click)="initializeTableData(1)">{{ 1 }}</a>
  <a class="urlCount text__bold" (click)="initializeTableData(2)">{{ 2 }}</a>
</div>

---

jQuery

如果您使用 jQuery，代码会变得简单得多。不再需要 for 循环，因为您可以简单地将事件侦听器添加到所有 .urlCount 元素的选择中：

$('.urlCount').on('click', function(){...});

并且您可以省略 if 语句来表示活动元素的存在，因为您可以在一个步骤中简单地从所有 .urlCount 元素中删除 .active 类（没有 for 循环）：

$('.urlCount').removeClass('active');

工作示例：

$('.urlCount').on('click', function(){
  $('.urlCount').removeClass('active');
  $(this).addClass('active');
});

a.urlCount {
  @include circle (20px, $white, inline-block);
  margin: 10px;
  border: solid 1px;
  border-color: $gray;
  text-align: center;
  color: $gray;
  font-size: 12px;
}

a.urlCount:hover {
  @include circle (20px, #f56c2f, inline-block);
  margin: 10px;
  border: solid 1px;
  border-color: #f56c2f;
  text-align: center;
  color: $white;
  font-size: 12px;
}

a.urlCount.active {
  @include circle (23px, #f56c2f, inline-block);
  margin: 10px;
  border: solid 1px;
  border-color: #f56c2f;
  text-align: center;
  color: $white;
  font-size: 16px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="urlNavigation">
  <span class="navTitle text__bold">SCAN RESULT OF URL</span>
  <a class="urlCount text__bold" [routerLinkActive]="'urlCount--active'" (click)="initializeTableData(1)">{{ 1 }}</a>
  <a class="urlCount text__bold" (click)="initializeTableData(2)">{{ 2 }}</a>
</div>