javascript - 为什么我的链接在点击后颜色会短暂地变为红色？

Question

我创建了一个名为 Audience Demographics 的模态框，在我的模态框中是一组主要流派，它打开了另一个包含我的子流派的模态框。

问题在于，当用户单击主要类型(例如人口统计)时，在下一个模态框打开主要类型(例如人口统计)之前的短暂时间将快速将字体颜色更改为红色。

现在字体颜色在我的任何主要流派时期都不应改变。

除此之外，我的主要流派的字体颜色似乎没有改变，即使我手动将 color:white 代码实现到 html 元素中(子流派应该是白色的，而不是蓝色的)。

请问有什么问题吗？

// maintains a sticky pop up (original code)
$('a[href="#ex6-1b"]').click(function(event) {
  event.preventDefault();
  $(this).modal({
    escapeClose: false,
    clickClose: false,
    showClose: false,
  });
});

// allows mutliple modals
var content = "";
$('a[href="#ex6-2bc"],a[href="#ex6-2b"],a[href="#ex6-3b"]').click(function(event) {
  event.preventDefault();
  $(this).modal({
    closeExisting: true,
    escapeClose: false,
    clickClose: false,
    showClose: false,
  });
  $('input[type=checkbox]').prop('checked', false);
});

.onlyThese {
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

input[type="checkbox"]+label {
  color: white
}

input[type="checkbox"] {
  display: none
}

input[type="checkbox"]:checked+label {
  color: red
}

input:focus {
  outline: none;
}

.your-divs {
  float: right;
  bottom: 0;
  right: 0;
  position: absolute;
  padding-right: 30px;
  padding-bottom: 15px;
  margin-bottom: 0px;
  font-size: 16px
}

.blackBox {
  border-style: solid;
  border-color: black;
  background-color: black;
  margin-bottom: 3px;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 7px;
  font-family: nunito;
  font-size: 14px;
}

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<!-- Remember to include jQuery :) -->
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />

<div class="blackBox" data-name="audience">
  <a class="btn" href="#ex6-1b" style="color:white"> <b> Audience Demographics </b> </a>
</div>
<div class="modal" id="ex6-1b" style="display:none; background-color:black">
  <div style="float:left;">
    <div style="line-height:1.8; font-size:16px; color:white; text-transform:uppercase">
      <p> <a href="#ex6-2bc"><b>Demographics</b></a> </p>
      <p> <a href="#ex6-2b"><b>LGBTQ</b></a> </p>
      <p> <a href="#ex6-3b"><b>BAME</b></a> </p>
    </div>
  </div>
  <div class="your-divs">
    <p style="color:white; text-transform:uppercase">
      <a href="#" rel="modal:close" class="onlyThese;"> <b>Return</b></a>
    </p>
  </div>
</div>
<div class="modal" id="ex6-2bc" style="display:none; background-color:black">
  <div style="line-height:1.8; font-size:16px">
    <p> <input type="checkbox" id="group19"> <label for="group19" class="onlyThese" name="male"> <b> Cis Male </b> </label> </p>
    <p> <input type="checkbox" id="group29"> <label for="group29" class="onlyThese" name="female"> <b> Cis Female </b> </label> </p>
    <p> <input type="checkbox" id="group39"> <label for="group39" class="onlyThese" name="non-binary"> <b> Non Binary </b> </label> </p>
  </div>
  <div class="your-divs">
    <p style="color:white; text-transform:uppercase">
      <a href="#" rel="modal:close" class="onlyThese"> <b>Apply</b></a>
    </p>
  </div>
</div>
<div class="modal" id="ex6-2b" style="display:none; background-color:black">
  <div style="line-height:1.8; font-size:16px">
    <p> <input type="checkbox" id="group10"> <label for="group10" class="onlyThese" name="gay"> <b> Gay </b> </label> </p>
    <p> <input type="checkbox" id="group20"> <label for="group40" class="onlyThese" name="lesbian"> <b> Lesbian </b> </label> </p>
    <p> <input type="checkbox" id="group30"> <label for="group30" class="onlyThese" name="bisexual"> <b> Bisexual </b> </label> </p>
    <p> <input type="checkbox" id="group40"> <label for="group40" class="onlyThese" name="bisexual"> <b> Transgender </b> </label> </p>
    <p> <input type="checkbox" id="group50"> <label for="group50" class="onlyThese" name="queer_non_conforming"> <b> Queer Non-Conforming </b> </label> </p>
  </div>
  <div class="your-divs">
    <p style="color:white; text-transform:uppercase">
      <a href="#" rel="modal:close" class="onlyThese"> <b>Apply</b></a>
    </p>
  </div>
</div>
<div class="modal" id="ex6-3b" style="display:none; background-color:black">
  <div style="line-height:1.8; font-size:16px">
    <p> <input type="checkbox" id="group11"> <label for="group11" class="onlyThese" name="mix_multiple_ethic"> <b> Mixed / Multiple Ethnic </b> </label> </p>
    <p> <input type="checkbox" id="group22"> <label for="group22" class="onlyThese" name="asian_british_asian"> <b> Asian / British Asian  </b> </label> </p>
    <p> <input type="checkbox" id="group33"> <label for="group33" class="onlyThese" name="black_african_caribbean"> <b> Black African / Black Caribbean </b> </label> </p>
    <p> <input type="checkbox" id="group44"> <label for="group44" class="onlyThese" name="other_ethic_group"> <b> Other Ethnic Group </b> </label> </p>
  </div>
  <div class="your-divs">
    <p style="color:white; text-transform:uppercase">
      <a href="#" rel="modal:close" class="onlyThese"> <b>Apply</b></a>
    </p>
  </div>
</div>

Answer 1

红色是事件链接的默认值

添加

a:visited { color:yellow }
a:active { color:pink }

如果你想改变颜色

// maintains a sticky pop up (original code)
$('a[href="#ex6-1b"]').click(function(event) {
  event.preventDefault();
  $(this).modal({
    escapeClose: false,
    clickClose: false,
    showClose: false,

  });
});


// allows mutliple modals
var content = "";
$('a[href="#ex6-2bc"],a[href="#ex6-2b"],a[href="#ex6-3b"]').click(function(event) {
  event.preventDefault();
  $(this).modal({
    closeExisting: true,
    escapeClose: false,
    clickClose: false,
    showClose: false,
  });
  $('input[type=checkbox]').prop('checked', false);
});

a:visited { color:yellow }
a:active { color:pink }

.onlyThese {
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

input[type="checkbox"]+label {
  color: white
}

input[type="checkbox"] {
  display: none
}

input[type="checkbox"]:checked+label {
  color: red
}

input:focus {
  outline: none;
}

.your-divs {
  float: right;
  bottom: 0;
  right: 0;
  position: absolute;
  padding-right: 30px;
  padding-bottom: 15px;
  margin-bottom: 0px;
  font-size: 16px
}

.blackBox {
  border-style: solid;
  border-color: black;
  background-color: black;
  margin-bottom: 3px;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 7px;
  font-family: nunito;
  font-size: 14px;
}

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<!-- Remember to include jQuery :) -->

<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />






<div class="blackBox" data-name="audience">
  <a class="btn" href="#ex6-1b" style="color:white"> <b> Audience Demographics </b> </a>
</div>

<div class="modal" id="ex6-1b" style="display:none; background-color:black">

  <div style="float:left;">

    <div style="line-height:1.8; font-size:16px; color:white; text-transform:uppercase">

      <p> <a href="#ex6-2bc"><b>Demographics</b></a> </p>

      <p> <a href="#ex6-2b"><b>LGBTQ</b></a> </p>

      <p> <a href="#ex6-3b"><b>BAME</b></a> </p>
    </div>
  </div>


  <div class="your-divs">
    <p style="color:white; text-transform:uppercase">
      <a href="#" rel="modal:close" class="onlyThese;"> <b>Return</b></a>
    </p>
  </div>
</div>

<div class="modal" id="ex6-2bc" style="display:none; background-color:black">
  <div style="line-height:1.8; font-size:16px">

    <p> <input type="checkbox" id="group19"> <label for="group19" class="onlyThese" name="male"> <b> Cis Male </b> </label> </p>

    <p> <input type="checkbox" id="group29"> <label for="group29" class="onlyThese" name="female"> <b> Cis Female </b> </label> </p>

    <p> <input type="checkbox" id="group39"> <label for="group39" class="onlyThese" name="non-binary"> <b> Non Binary </b> </label> </p>



  </div>

  <div class="your-divs">
    <p style="color:white; text-transform:uppercase">
      <a href="#" rel="modal:close" class="onlyThese"> <b>Apply</b></a>
    </p>
  </div>
</div>

<div class="modal" id="ex6-2b" style="display:none; background-color:black">
  <div style="line-height:1.8; font-size:16px">

    <p> <input type="checkbox" id="group10"> <label for="group10" class="onlyThese" name="gay"> <b> Gay </b> </label> </p>

    <p> <input type="checkbox" id="group20"> <label for="group40" class="onlyThese" name="lesbian"> <b> Lesbian </b> </label> </p>

    <p> <input type="checkbox" id="group30"> <label for="group30" class="onlyThese" name="bisexual"> <b> Bisexual </b> </label> </p>

    <p> <input type="checkbox" id="group40"> <label for="group40" class="onlyThese" name="bisexual"> <b> Transgender </b> </label> </p>

    <p> <input type="checkbox" id="group50"> <label for="group50" class="onlyThese" name="queer_non_conforming"> <b> Queer Non-Conforming </b> </label> </p>


  </div>

  <div class="your-divs">
    <p style="color:white; text-transform:uppercase">
      <a href="#" rel="modal:close" class="onlyThese"> <b>Apply</b></a>
    </p>
  </div>

</div>

<div class="modal" id="ex6-3b" style="display:none; background-color:black">
  <div style="line-height:1.8; font-size:16px">

    <p> <input type="checkbox" id="group11"> <label for="group11" class="onlyThese" name="mix_multiple_ethic"> <b> Mixed / Multiple Ethnic </b> </label> </p>

    <p> <input type="checkbox" id="group22"> <label for="group22" class="onlyThese" name="asian_british_asian"> <b> Asian / British Asian  </b> </label> </p>

    <p> <input type="checkbox" id="group33"> <label for="group33" class="onlyThese" name="black_african_caribbean"> <b> Black African / Black Caribbean </b> </label> </p>

    <p> <input type="checkbox" id="group44"> <label for="group44" class="onlyThese" name="other_ethic_group"> <b> Other Ethnic Group </b> </label> </p>


  </div>

  <div class="your-divs">
    <p style="color:white; text-transform:uppercase">
      <a href="#" rel="modal:close" class="onlyThese"> <b>Apply</b></a>
    </p>
  </div>
</div>