JSFiddle - React, Tailwind, and code Playground

by BenjaminRay

HTML

<div id="tabs" class="content-wrapper">
    <ul>
        <li><a href="#tab-Fiction">Fiction</a>

        </li>
        <li><a href="#tab-Nonfiction">Nonfiction</a>

        </li>
        <li><a href="#tab-MiscTwain">Miscellaneous</a>

        </li>
        <li><a href="#tab-Media">Media</a>

        </li>
    </ul>
    <div id="tab-Fiction">
        <select id="fictionDropDown">
            <option value="HuckFinn">Huck Finn</option>
            <option value="TomSawyer">Tom Sawyer</option>
            <option value="tPatP">Prince and the Pauper</option>
            <option value="ConnYank">Connecticut Yankee</option>
            <option value="Gilded">The Gilded Age</option>
            <option value="Puddnhead">Pudd'nhead Wilson</option>
            <option value="ShortStories">Short Stories</option>
        </select>
        <div id="FictionContent" class="clearfix">Content in Fiction tab</div>
    </div>
</div>

JavaScript

var currentFictionSelection = 'somevalue';
    
    $('#fictionDropDown').change(function () {
        //configLoading();
        var sel = this.value;
        if ((sel == "HuckFinn") && (currentFictionSelection != "HuckFinn")) {
            alert('foo');
            $('#FictionContent').load('Content/HuckFinn.html');
            currentFictionSelection = "HuckFinn";
        } else if ((sel == "TomSawyer") && (currentFictionSelection != "TomSawyer")) {
            alert('bar');
            $("#FictionContent").empty();
            $('#FictionContent').html('Tom Sawyer will be added later');
            currentFictionSelection = "TomSawyer";
        }
    });