JSFiddle - React, Tailwind, and code Playground

by Hüseyin BABAL

HTML

<div class="content_1">    
//Content of first page goes
</div>
<div class="content_2" style="display:none;">
//Content of second page goes here
</div>
<div class="content_3" style="display:none;">
//Third page content goes here
</div>

<p>Pages: 
<a href="#" class="button_1"> 1</a>
<a href="#" class="button_2"> 2</a>
<a href="#" class="button_3"> 3</a></p>
<div class="clearLeft"></div>

JavaScript

$(document).ready(function(){
var a = 200;
$('.button_1').css("background-color","#00CCFF");
$('.button_1').click(function(){
    $('.content_1').fadeIn(a);
    $('.content_2').fadeOut();
    $('.content_3').fadeOut();
        $('.content_4').fadeOut();
    $('.button_1').css("background-color","#00CCFF");
    $('.button_2').css("background-color","#99FF99");
        $('.button_3').css("background-color","#99FF99");
        $('.button_4').css("background-color","#99FF99");
});
$('.button_2').click(function(){
    $('.content_1').fadeOut();
    $('.content_2').fadeIn(a);
    $('.content_3').fadeOut();
        $('.content_4').fadeOut();
    $('.button_2').css("background-color","#00CCFF");
    $('.button_1').css("background-color","#99FF99");
        $('.button_3').css("background-color","#99FF99");
        $('.button_4').css("background-color","#99FF99");
});
$('.button_3').click(function(){
    $('.content_1').fadeOut();
    $('.content_2').fadeOut();
    $('.content_3').fadeIn(a);
        $('.content_4').fadeOut();
        $('.button_3').css("background-color","#00CCFF");
        $('.button_1').css("background-color","#99FF99");
        $('.button_2').css("background-color","#99FF99");
        $('.button_4').css("background-color","#99FF99");
});
});