JSFiddle - React, Tailwind, and code Playground

by muthusamy

HTML

<ul class="boom_boom_selector">
                <li class="boom_selector">web</li>
                <li class="boom_selector">extra</li>
                <li class="boom_selector">print</li>              
            </ul>        

        <div id="work_showcase" class="work_showcase">
    	</div> <!-- #work_showcase -->

CSS

#work_showcase {
    height: 100px;
    width: 100px;
}
.web {
    background-image: url("http://a2.mzstatic.com/us/r1000/100/Purple/1c/59/f7/mzl.svthomtr.100x100-75.jpg");
}
.extra {
    background-image: url("http://img1.rnkr-static.com/list_img/708/580708/C100/the-very-best-of-the-cereal-guy-meme.jpg?version=1356713157000");
}

.print {
    background-image: url("http://img3.rnkr-static.com/list_img/19540/339540/C100/the-very-best-of-the-futurama-fry-meme.jpg?version=1358762124000");
}


.work_showcase {
    background-image: url("http://ecx.images-amazon.com/images/I/511bm3PQyjL._SL500_SS100_.jpg");
}

JavaScript

$(document).ready(function(){
$('.boom_selector').click(function(){
   $('#work_showcase').attr('class', $(this).text()); 
});
});