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

Question

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

这是我目前所拥有的。我能够改变背景颜色，但不知道应该如何切换图像。 active-tab 类控制背景颜色。

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");
}

Answer 2

您可以检查父级是否有active-tab 类，如果是，则更改图像然后删除该类。
这个答案只是对逻辑的帮助，也许您需要根据需要进行更改，但这是一种遵循的方法。

看看sn-p。

if($('.tab-container').length > 0){
  $('.tab a').on('click', function(e){
    
    var myPath = '';
    if ($('.tab').hasClass('active-tab')){
      myPath='https://n6-img-fp.akamaized.net/icones-gratis/inicio-icone-silhouette_318-85097.jpg?size=338c&ext=jpg';
      $('.tab').removeClass('active-tab');

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

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 3

我建议改为在 img 标记上使用 css，当单击它时，颜色会发生变化，而无需更改实际图像源（但会存在一些浏览器兼容性问题）。

适用于悬停的示例：

body {
	background: #444;
}

.square {
	width: 10rem;
	height: 10rem;
	background: #fff;
	display: block;
}

.square:hover {
		filter: brightness(0.35) sepia(1)
 hue-rotate(310deg) saturate(7);
	}

<div class="square"></div>