为什么点击后我的链接会短暂变为红色?

时间:2019-08-16 11:41:33

标签: javascript jquery html css

我创建了一个名为“受众人口统计”的模态框,模态框内部是一组主要类型,它们打开了另一个包含我的子流派的模态框。

问题在于,当用户单击主要体裁(例如,人口统计学)时,在下一个模式框打开之前,短暂地,主要体裁(例如,人口统计学)会很快将字体颜色更改为红色。

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

此外,即使我在html元素中手动实现了color:white代码,子类的字体颜色似乎也没有改变(子类应该是白色,蓝色)。

请问我有什么问题的帮助。

// 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>

1 个答案:

答案 0 :(得分:2)

红色是活动链接的默认

添加

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>