JSFiddle - React, Tailwind, and code Playground

by Ying Chor Ding

HTML

<ul class="ppl-img">
<li><a target="one">Show ppl 1</a></li>
<li><a target="two">Show ppl 2</a></li>
<li><a target="three">Show ppl 3</a></li>
</ul>


<div class="clear-0"></div>

<div id="one" class="content">This is content 1.</div>
<div id="two" class="content">This is content 2.</div>
<div id="three" class="content">This is content 3.</div>

CSS

.clear-0 { clear: both; }
.ppl-img li { list-style: none; margin: 0; padding: 0 20px; float: left; }
.selected { color: red; }

JavaScript

/*
$('.ppl-img a').click(function (event) {
  event.preventDefault();
  $($(this).attr('href')).show();
});
*/
for loop = function(){
$('.content').hide(0);
$('.ppl-img li a').eq(0).addClass('selected');
$('#one').show();
    $('.ppl-img li a').click(function(){
    // link style change
    $('.ppl-img li a').removeClass('selected');
    $(this).addClass('selected');
     // show content
    $('.content').hide(0);
    $('#'+$(this).attr('target')).fadeIn(500);
});
}

$(function(){
    loop(); 
});