JSFiddle - React, Tailwind, and code Playground

by bjelline

HTML

<menu>
    <li><a class="ajax_thing" id="red_action" action_type="red">Make me red</a>

    </li>
    <li><a class="ajax_thing" id="yellow_action" action_type="yellow">Make me yellow</a>

    </li>
</menu>
<li><a href="http://www.google.com">Go to other site</a>

</li>

CSS

.red {
        background:red
    }
    .yellow {
        background:yellow
    }

JavaScript

$(function () {
        $('.ajax_thing').click(function () {
            location.hash = $(this).attr('action_type');
            return false
        })
        var originalTitle = document.title

            function hashChange() {
                var page = location.hash.slice(1)
                if (page != "") {
                    $('#content').load(page + ".html #sub-content")
                    document.title = originalTitle + ' – ' + page
                }
            }
        if ("onhashchange" in window) { // cool browser
            $(window).on('hashchange', hashChange).trigger('hashchange')
        } else { // lame browser
            var lastHash = ''
            setInterval(function () {
                if (lastHash != location.hash) hashChange()
                lastHash = location.hash
            }, 100)
        }
    })