JSFiddle - React, Tailwind, and code Playground

by crucify

HTML

<div class="snsButtons">
  <a href="#" data-sns="twitter"><img></a>
  <a href="#" data-sns="google"><img></a>
  <a href="#" data-sns="facebook"><img></a>
</div>
<div class="snsTargets">
  <div id="sns_twitter"><img></div>
  <div id="sns_google"><img></div>
  <div id="sns_facebook"><img></div>
</div>

CSS

.snsButtons img { width:60px; height:60px; background:black; margin:0 5px 5px 0; }

.snsTargets img { width:80px; height:80px; border:1px solid black; margin:0 5px 5px 0; }

.twitter { background:cyan; }
.google { background:red; }
.facebook { background:blue; }

JavaScript

$('.snsButtons>a').on('click', function() {
    var snsType = $(this).data('sns');
    $('#sns_' + snsType + '>img').each(function() {
      // $(obj)[0] 형식은 객체가 없을경우 오류.
      this.className = snsType;
      // this.src = '/img/' + snsType + '.gif';
    });
    return false; // event cancel
  });