JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<ul>
    <li class="showlink"></li>
    <li class="showlink"></li>
    <li class="showlink"></li>
    <li class="showlink"></li>
    <li class="showlink"></li>
    <li class="showlink"></li>
    <li class="showlink"></li>
    <li class="showlink"></li>
    <li class="showlink"></li>
    <li class="showlink"></li>
</ul>

CSS

.showlink {
    color: #f90;
}

.showlink.hovered {
    color: #f00;
}

JavaScript

$('.showlink').each(
    function(i){
        $(this).text('showlink: ' + i);
    });

// Changes color on hover
    $(function() {
        $('.showlink').hover(function(){
            $(this).addClass('hovered');
        },
        function(){
            $(this).removeClass('hovered');
        });
    });
//Changes color depending on which page is active, fades that page in
    $(function(){
        $('#show_one').css('color', '#ffcb06');
        $('#two, #three').hide();
    });

    $('.showlink').click(function(){
        $('.showlink').css('color', '#f3f3f3');
        $(this).css('color', '#ffcb06');
        var toShow = this.id.substr(5);
        $('div.page:visible').fadeOut(600, function(){
            $('#' + toShow).fadeIn(600);
        });
    });