JSFiddle - React, Tailwind, and code Playground

by johnhoffman

HTML

<ul>
    <li><a href="#foo">Foo</a></li>
    <li><a href="#bar">Bar</a></li>
    <li><a href="#baz">Baz</a></li>
</ul>

CSS

ul
{
padding: 3px 0;
margin-left: 10px;
margin-top: 10px;
border-bottom: 1px solid #778;
font: bold 12px Verdana, sans-serif;
}

li
{
list-style: none;
margin: 0;
display: inline;
}

li a
{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: #DDE;
text-decoration: none;
}

li a:link { color: #448; }
li a:visited { color: #667; }

li a:hover
{
color: #000;
background: #AAE;
border-color: #227;
}

li a#currentCategory
{
background: white;
border-bottom: 1px solid white;
}

JavaScript

// Highlight proper tab.
function highlightProperTab(currentCategoryShort) {
    if ($("#currentCategory").length) $("#currentCategory").removeAttr("id");
    $("li has(a[href='#" + currentCategoryShort + "'])").attr("id", "currentCategory");
}