Question

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

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

＆＃13;

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

＆＃13;

img{
  width: 48px
}

＆＃13;

<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>

＆＃13;

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，如果是，则更改映像，然后删除该类。
这个答案只是对逻辑的帮助，也许你需要根据自己的需要进行改变，但这是一种遵循的方式。

看一下片段。

＆＃13;

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

＆＃13;

img{
  width: 48px
}

＆＃13;

<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>

＆＃13;

Answer 3

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

适用于悬停的示例：

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: