JSFiddle - React, Tailwind, and code Playground

HTML

<div id="topNav">



<div id="topNav1">
<span class="topNavLink" id="headingTitle" >Words</span>
<a href="javascript:;" id="home" class="topNavLink">Home</a>
<a href="javascript:;" id="new" class="topNavLink">New Test</a>
</div>

<div id="topNav2">
<input type="search" size="35" id="searchInput">
<input type="button" value="Search" id="searchBttn">
</div>



<div id="topNav3">
<a id="feedback" href="javascript:;" class="topNavLink">Give Feedback</a>

<a href="javascript:;" id="settings" class="topNavLink">Settings</a>
</div>

</div>

<div id="divider">

</div>

<div id="tests">

    <div id="createform">

    </div>

    <div id="countingOptions">

    </div>


    <div id="studyModes">

    </div>

    <div id="testingCenter">

        <div id="test">

        </div>
 
        <div id="bottomNav">

        </div>

    </div>

</div>

    <ul id="UInavList">
        <li class="selectedNav"><a href="javascript:;">My Activity</a></li>
        <li ><a href="javascript:;">My Tests</a></li>
        <li ><a href="javascript:;">Messaging</a></li>
        <li ><a href="javascript:;">Search</a></li>
    </ul>


    <div id="selectedPane">
        <p>   </p>
    </div>

CSS

.selectedNav { background-color: #f00; }

JavaScript

$('#UInavList a').click( function() {
    $('#UInavList li').removeClass('selectedNav');
    alert($(this).text());
    $(this).closest('li').addClass('selectedNav');
    return false;
})