JSFiddle - React, Tailwind, and code Playground

by phreaddee

HTML

<nav>
    <ul>
        <li><a href="/home.html">Home</a></li>
        <li><a href="/listen.html">Listen</a></li>
        <li><a href="/history.html">History</a></li>
        <li><a href="/staff.html">Staff</a></li>
        <li><a href="/blog.html">Blog</a></li>
        <li><a href="/contact.html">Contact</a></li>
    </ul>
</nav>

CSS

* {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    margin:0;
    padding:0;
}
html {
    font-size:62.5%;
}
nav {
    background-color:rgb(34, 34, 34);
    padding:2rem;
}
nav ul {
    list-style-type:none;
}
nav ul li {
    margin:1rem 0;
}
nav ul li a {
    display:block;
    background-image:url("http://phreaddee.com.au/images/woodgrain.jpg");
    width:18rem;
    height:5rem;
    border:0.3rem solid #fff;
    border-radius:0.8rem;
    color:#fff;
    font-family:"Georgia", serif;
    text-decoration:none;
    line-height:4.4rem;
    font-size:3rem;
    padding: 0 0 0 1rem;
}
nav ul li a:hover, .selected {
    background-image:url("http://phreaddee.com.au/images/woodgrain-grey.jpg");
}

JavaScript

// add 'selected' class to main nav when the path and link match.
$(function () {
    var path = location.pathname.substring(1);
    if (path) $('nav li a[href$="' + path + '"]').attr('class', 'selected');
});

// this will work on your page but not here.