活动图标上的背景颜色？

Question

我正在使用类似于HERE的图标栏。

我使用脚本显示/隐藏内容，具体取决于所选的标签。我的问题是，如果点击了图标，我该如何给图标添加背景颜色？我尝试过添加：

.icon-bar a:focus {
background-color: red;
}

到我的CSS但它只闪烁红色然后回到原来的白色。 代码：

＆＃13;

＆＃13;

.icon-bar {
  width: 100%;
  overflow: auto;
  border: 1px solid #777777;
  box-shadow: 2px 2px 5px #777777;
}

.icon-bar a {
  float: left;
  width: 20%;
  text-align: center;
  padding: 12px 0px;
  transition: all 0.3s ease;
  color: black;
  font-size: 30px;
}

.icon-bar a:hover {
  background-color: #e0e0e0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<div class="icon-bar">
  <a href="#box" title="Markets"><i class="fa fa-line-chart"></i></a>
  <a href="#box2"><i class="fa fa-cubes"></i></a>
  <a href="#"><i class="fa fa-diamond"></i></a>
  <a href="#"><i class="fa fa-exchange"></i></a>
  <a href="#box5" title="List"><i class="fa fa-ban"></i></a>
  <script>
    $("a").click(function() {
      var myelement = $(this).attr("href")
      $(myelement).slideToggle(1);
      $(".toggle:visible").not(myelement).hide();
    });
  </script>

</div>

＆＃13;

＆＃13;

＆＃13;

我的图标栏照片供参考：

Answer 1

根据MDN文档:focus伪类指示具有当前焦点的元素。根据定义，它是临时状态，但您希望它是永久性的。因此，您需要创建一些CSS类，其中包含用于指示＆＃34; selected＆＃34;栏上的图标，并在点击单击项目时应用它。例如：

＆＃13;

＆＃13;

$(".icon-bar a").on('click', function () {
  var $item = $(this);
  $item.siblings('a').removeClass('selected');
  $item.addClass('selected');
});

＆＃13;

.icon-bar {
    width: 100%;

    overflow: auto;
    border: 1px solid #777777;
    box-shadow: 2px 2px 5px #777777;
}

.icon-bar a {
    float: left;
    width: 20%;
    text-align: center;
    padding: 12px 0;
    transition: all 0.3s ease;
    color: black;
    font-size: 30px;

}

.icon-bar a:hover {
    background-color: #e0e0e0;
}

.icon-bar a.selected {
    background-color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="icon-bar">
    <a href="#box" title="Markets"><i class="fa fa-line-chart"></i></a>
    <a href="#box2"><i class="fa fa-cubes"></i></a>
    <a href="#"><i class="fa fa-diamond"></i></a>
    <a href="#"><i class="fa fa-exchange"></i></a>
    <a href="#box5" title="List"><i class="fa fa-ban"></i></a>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

删除所有兄弟姐妹的'addcolour'类，然后将其添加到click元素

的jQuery

 $("a").click(function(){

     // remove class off siblings
     $(this).siblings().removeClass('addcolour');
     // add the class to this element
     $(this).addClass('addcolour');

     var myelement = $(this).attr("href")       
     $(myelement).slideToggle(1);
     $(".toggle:visible").not(myelement).hide();

 });

CSS

.addcolour {
    background-color: red;
}

Answer 3

更改点击功能，以便从所有background-color中移除a，然后仅将颜色添加到目标a，如下所示：

$("a").click(function(){
    $('a').css('background-color','');
    var myelement = $(this).attr("href")
    $(myelement).slideToggle(1);
    $(".toggle:visible").not(myelement).hide();
    $(this).css('background-color','green');
});

.icon-bar {
width: 100%;

overflow: auto;
border: 1px solid #777777;
box-shadow: 2px 2px 5px #777777;
}

.icon-bar a {
float: left;
width: 20%;
text-align: center;
padding: 12px 0px;
transition: all 0.3s ease;
color: black;
font-size: 30px;

}

.icon-bar a:hover {
background-color: #e0e0e0;
  }

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="icon-bar">
          <a href="#box" title="Markets"><i class="fa fa-line-chart"></i></a>
          <a href="#box2"><i class="fa fa-cubes"></i></a>
          <a href="#box5" title="List"><i class="fa fa-ban"></i></a>
        
</div>

Answer 4

伪类:focus仅适用于当前焦点的元素，换句话说;单击或点击的元素 - 但此状态对于除当前未选择的input字段以外的任何其他内容都是短暂的，因此对于通用元素，例如此处的a标记情况下，它不会持久。

  

：focus CSS伪类表示一个元素（例如表单）   输入）已获得关注。它通常是在触发时触发的   用户点击或点击元素或使用键盘选择它   ＆＃34;标签＆＃34;键。

参考： :focus - CSS | MDN

您需要一个javascript方法才能获得持久解决方案：

   $('.icon-bar a').click(function() {
      $(this).toggleClass('toggle-state');
      $('.icon-bar a').not(this).removeClass('toggle-state');
    });

此解决方案（在下面嵌入的代码段中演示）非常简洁，可以解释活动元素上的点击次数，删除活动类并重置为默认样式。

＆＃13;

＆＃13;

.icon-bar {
  width: 100%;
  overflow: auto;
  border: 1px solid #777777;
  box-shadow: 2px 2px 5px #777777;
}

.icon-bar a {
  float: left;
  width: 20%;
  text-align: center;
  padding: 12px 0px;
  transition: all 0.3s ease;
  color: black;
  font-size: 30px;
}

.icon-bar a:hover {
  background-color: #e0e0e0;
}

.icon-bar a.toggle-state {
  background-color: #ff0000;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<div class="icon-bar">
  <a href="#box" title="Markets"><i class="fa fa-line-chart"></i></a>
  <a href="#box2"><i class="fa fa-cubes"></i></a>
  <a href="#"><i class="fa fa-diamond"></i></a>
  <a href="#"><i class="fa fa-exchange"></i></a>
  <a href="#box5" title="List"><i class="fa fa-ban"></i></a>
  
  <script>
    $('.icon-bar a').click(function() {
      $(this).toggleClass('toggle-state');
      $('.icon-bar a').not(this).removeClass('toggle-state');
    });
  </script>

</div>

＆＃13;

＆＃13;

＆＃13;