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

时间:2018-04-13 20:40:39

标签: javascript jquery html css

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

这是我到目前为止所拥有的。我能够改变背景颜色,但不知道如何切换图像。 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>
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:0)

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

看一下片段。

&#13;
&#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;
&#13;
&#13;

答案 2 :(得分:-1)

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

适用于悬停的示例:

&#13;
&#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;
&#13;
&#13;