JSFiddle - React, Tailwind, and code Playground

by crowjonah

HTML

<ul class="top_head">
    <li>
     <a href="#"></a>
    </li>
    <li>
    <a href="#"></a>
    </li>
     <li>
    <a href="#"></a>
    </li>
    </ul>

CSS

.top_head li a {
    height: 20px; 
    width: 20px;
    display: block;
    background: url(http://lorempixel.com/20/40/abstract) 0 0 no-repeat;
    overflow: hidden; 
    margin: 5px;
}
.top_head li a.selected {
    background: url(http://lorempixel.com/20/40/abstract) 0 -20px no-repeat;
}

JavaScript

$(document).ready(function() {
    $('.top_head li a').click(function() {
        $('.top_head li a').removeClass('selected');       $(this).toggleClass('selected');
    });
});