javascript - 单击更改图标，然后在下次单击时恢复为原始图标

Question

我有一组选项卡，当您单击其中一个时，背景颜色会变为红色。如果您尚未单击选项卡，则背景为白色。每个选项卡中都有一个图标，颜色为白色(如果您单击了该选项卡)或红色(如果您没有单击该选项卡)。单击(或未单击)选项卡时，我很难将图标更改为正确的颜色。顺便说一句，图标是图像。

这就是我目前所拥有的。我能够改变背景颜色，但不确定我应该如何切换图像。事件选项卡类控制背景颜色。

if($('.tab-container').length > 0){

  $('.tab a').on('click', function(e){
    $('.tab').removeClass('active-tab');
    $(this).parent().addClass('active-tab');
    $(this).find('img').attr('src','https://img-21.ccm2.net/1-NtiXuJNqGFChdD_IIpOnM9aOA=/200x/31027358c0f24fd3bd484a485b5a652c/ccm-faq/1538-9tLde1xY3nSyajQH-s-.png');
  });


}

img{
  width: 48px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='tab-container'>
         <div class='tab'>
	          <a href='#this-is-the-first-tab' id='this-is-the-fist-tab'>
		          <img src='https://n6-img-fp.akamaized.net/icones-gratis/inicio-icone-silhouette_318-85097.jpg?size=338c&ext=jpg' class='tab-icon'> 
	         </a>
        </div>
    </div>

Answer 1

if ($('.tab-container').length > 0) {
  $('.tab img').on('click', function(e) {
    $('.tab-icon').toggleClass('active-tab')
  });
}

 .active-tab{
    content:url("https://n6-img-fp.akamaized.net/icones-gratis/inicio-icone-silhouette_318-85097.jpg?size=338c&ext=jpg");
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='tab-container'>
  <div class='tab'>
    <a href='#this-is-the-first-tab' id='this-is-the-fist-tab'>
      <img height="50" width="50" id="x" src='https://img-21.ccm2.net/1-NtiXuJNqGFChdD_IIpOnM9aOA=/200x/31027358c0f24fd3bd484a485b5a652c/ccm-faq/1538-9tLde1xY3nSyajQH-s-.png' class='tab-icon'>
    </a>
  </div>
</div>

您可以将图像 src 添加到 active-tab 类，它应该像背景一样切换。

.active-tab{
content:url("//tab-icon-default.png");
}