JSFiddle - React, Tailwind, and code Playground

by TrueBlueAussie

HTML

<ul id="main-menu">
    <li><a href="#page-1" class="slide-item selected">page 1</a>

    </li>
    <li><a href="#page-2" class="slide-item">page 2</a>

    </li>
    <li><a href="#page-3" class="slide-item">page 3</a>

    </li>
    <li><a href="#page-4" class="slide-item">page 4</a>

    </li>
</ul>
<div class="test">
    <div id="page-1" class="page">
        <div class="page-container">
             <h3>page 1</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi consequatur deleniti eum illo itaque iusto officia soluta, veritatis? Ab aliquam autem cum doloribus eaque eum in itaque natus rem, vero. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi consequatur deleniti eum illo itaque iusto officia soluta, veritatis? Ab aliquam autem cum doloribus eaque eum in itaque natus rem, vero. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi consequatur deleniti eum illo itaque iusto officia soluta, veritatis? Ab aliquam autem cum doloribus eaque eum in itaque natus rem, vero. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi consequatur deleniti eum illo itaque</p>
        </div>
    </div>
</div>

JavaScript

// Use wrapped DOM ready event to provide local $ for jQuery
jQuery(function ($) {
    $('.slide-item').on('click', function () {
        var $link = $(this);
        var target = $link.attr('href').substr(1);

        // If the div has any content it is "loaded"
        if ($('#' + target).html().length) {
            console.log('loaded');
        } else {
            // Dummy test code - REMOVE THIS
            $('#' + target).html("I AM LOADED:" + target);
            // End dummy test code
            $.get("pages/" + target + ".html", function (data) {
                $('#' + target).html(data);
            });
        }

        return false;
    }).each(function (index) {
        // create an empty placeholder DIV (in order) with unique matching id for each new entry
        var $link = $(this);
        var id = $link.attr("href").substr(1);
        // If page not already present...
        if (!$('#' + id).length) {
            $('.test').append($('<div>').attr("id", id));
        }
    });
});