JSFiddle - React, Tailwind, and code Playground

by phillpafford

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width; initial-scale=1.0" />
        <link rel="stylesheet"  href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
        <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
    </head>
    <body>
        <div data-role="page" id="home">
            <div data-role="header" data-theme="b">
                <h1>Test</h1>
            </div>
            <div data-role="content" data-theme="d">
                <div data-role="navbar" data-theme="d">
                    <ul id="custom-nav-list">
                        <li><a href="#" data-icon="custom" class="ui-btn-active" id="custom-li-1">Home</a></li>
                        <li><a href="#" data-icon="grid" id="custom-li-2">Second page</a></li>
                        <li><a href="#" data-icon="star" id="custom-li-3">Third page</a></li>
                    </ul>
                </div>
            </div>
           
        </div>
    </body>
</html>

CSS

#custom-li-1.ui-btn-active {
    background:green !important;
}

#custom-li-2.ui-btn-active {
    background:red !important;
}

#custom-li-3.ui-btn-active {
    background:blue !important;
}

.ui-btn-active{
    background:red !important;
}

JavaScript

$('#custom-li-1').click(function() {
    $(this).attr('data-icon','star');
    $(this).children().children().next().removeClass('ui-icon-custom').addClass('ui-icon-star');
}).page();

$('#custom-li-2').click(function() {
    $(this).attr('data-icon','home');
    $(this).children().children().next().removeClass('ui-icon-grid').addClass('ui-icon-home');
}).page();

$('#custom-li-3').click(function() {
    $(this).attr('data-icon','grid');
    $(this).children().children().next().removeClass('ui-icon-star').addClass('ui-icon-grid');
}).page();