时间戳

首页 > 解决方案 > 你如何让一个 div 有一个活跃的或访问的风格？

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

问题描述

当它是活动导航时，我试图让我的导航变大和橙色但是在点击它之后会发生什么设计显示然后回到默认的未点击设计。

这是我的代码：

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>

标签： htmlcsscss-selectorsstyles

解决方案

您可以使用 Javascript 或 jQuery 通过向单击的元素添加一个类并为该类定义所需的 CSS 样式来实现此目的。

Javascript

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

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

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

使用!!(double negation) 将值转换为布尔值，例如undefinedtofalse或 (existing) objecttotrue

最后，您只需要将.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 语句来表示活动元素的存在，因为您可以在一个步骤中简单地.active从所有元素中删除该类（无需 for 循环）：.urlCount

$('.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>

推荐阅读