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

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

看一下代码片段。

 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>