1
現在のアクティブアンカーで色の変更を実現しようとしている下のHTMLコードでは、タブをクリックするとその背景として色（＃ffd96b） Chromeでは問題なく動作していますが、IEやMozillaでは動作しません。なぜそれが起きているのか分からないことがあるかもしれません。どんな助けも大歓迎です。：active and：アンカーにフォーカスがInternet ExplorerとMozillaで動作していません
.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;
}<!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>
'：active'は、現在アクティブなリンクを意味するものではなく、現在使用中のリンクを意味します（クリックすると） – junkfoodjunkie
はコードをコピーしました。アイテムの左マウスボタンを押している間、色が変わります。 '：active'はアクティブにならないでしょう。あなたはあなたの問題にもっと詳細をsupllyしてくださいできますか？ – DavSev
私は、Jqueryの切り替えをクリックして項目の色を変更したいと思っています。 http://api.jquery.com/toggle/ – DavSev