Question

在下面的HTML代码中，我试图在当前活动锚点上实现颜色更改意味着一旦单击任何选项卡它应该显示颜色（＃ffd96b）作为其背景，它适用于Chrome但不适用于IE和Mozilla 。不知道为什么会发生这种情况可能是我错过了什么，非常感谢任何帮助。

＆＃13;

.tileMargin {
  margin: 5%;
}
.deviceName {
  width: 60%;
  float: left;
  padding: 5px;
  border-radius: 5px 0px 0px 5px;
  border: 1px solid #ccc;
  background-color: #f2f2f2;
  font-size: 0.75em;
}
.deviceCount {
  width: 40%;
  float: left;
  background-color: #f2f2f2;
  border-radius: 5px;
  border: 1px solid #ccc;
  text-align: center;
  margin-left: -3px;
}
.deviceCount >div {
  width: 33.33%;
  float: left;
  border-left: 1px solid #ccc;
}
.deviceCount input,
button {
  width: 100%;
  float: left;
  padding: 3px 0px;
  background-color: #f2f2f2;
  border: none;
  text-align: center;
  appearance: button;
  border-radius: 5px;
}
.devicesSmall a:hover div,
.devicesSmall a:hover input,
.devicesSmall a:hover button,
.devicesSmall a:active div,
.devicesSmall a:active input,
.devicesSmall a:active button,
.devicesSmall a:focus div,
.devicesSmall a:focus input,
.devicesSmall a:focus button {
  background-color: #ffd96b !important;
}

＆＃13;

<!Doctype HTML>
<html lang="en">

<head>
  <Title>asd sada asfa</Title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="tileMargin">
        <div class="devicesSmall col-lg-3 col-md-3 col-sm-6 col-xs-6 ">
          <a href="#">
            <div class="deviceName"><span>Mobile</span>
            </div>
            <div class="deviceCount">
              <div>
                <button onclick="addProduct('mobile');">+</button>
              </div>
              <div>
                <input id="mobile" type="text" value="1" disabled>
              </div>
              <div>
                <button onclick="removeProduct('mobile');">-</button>
              </div>
            </div>
          </a>
        </div>
        <div class="devicesSmall col-lg-3 col-md-3 col-sm-6 col-xs-6">
          <a href="#">
            <div class="deviceName"><span>Landline</span>
            </div>
            <div class="deviceCount">
              <div>
                <button onclick="addProduct('landline');">+</button>
              </div>
              <div>
                <input id="landline" type="text" value="1" disabled>
              </div>
              <div>
                <button onclick="removeProduct('landline');">-</button>
              </div>
            </div>
          </a>
        </div>
        <div class="devicesSmall col-lg-3 col-md-3 col-sm-6 col-xs-6">
          <a href="#">
            <div class="deviceName"><span>Internet</span>
            </div>
            <div class="deviceCount">
              <div>
                <button onclick="addProduct('internet');">+</button>
              </div>
              <div>
                <input id="internet" type="text" value="0" disabled>
              </div>
              <div>
                <button onclick="removeProduct('internet');">-</button>
              </div>
            </div>
          </a>
        </div>
        <div class="devicesSmall col-lg-3 col-md-3 col-sm-6 col-xs-6">
          <a href="#">
            <div class="deviceName"><span>IPTV</span>
            </div>
            <div class="deviceCount">
              <div>
                <button onclick="addProduct('Iptv');">+</button>
              </div>
              <div>
                <input id="Iptv" type="text" value="1" disabled>
              </div>
              <div>
                <button onclick="removeProduct('Iptv');">-</button>
              </div>
            </div>
          </a>
        </div>
        <div class="clearfix"></div>
      </div>
    </div>
  </div>
</body>

</html>

＆＃13;

Answer 1

它不是在FF或IE中工作，:active在您单击元素并且不保留它时应用。释放单击后，样式将被删除。

此外，在您点击链接后，Chrome会将焦点放在链接上，而FF和IE则不会。这就是您单击:focus样式后删除的原因。

要激活链接，请在CSS中添加一个类active，然后根据使用JS单击的链接添加/删除类。

Answer 2

首先，感谢大家研究这个问题......

我在我的代码中发现问题是创建问题并导致：active和：focus无法按预期工作。实际上我已经在锚标签下放置了输入和按钮等表单元素，根据w3c标准，这是不正确的实现。

现在我已经从“a”标签内部删除了所有按钮和输入，现在工作正常。

：active和：关注锚点对IE和Mozilla不起作用

2 个答案: