JSFiddle - React, Tailwind, and code Playground

by mori57

HTML

<div class="second-level-menu-vertical">
        <ul class="top-level">
            <li><a href="K-5th-Grades.aspx">K-5th Grades</a></li>
            <li><a href="6th-grade.aspx">6th Grade</a></li>
            <li><a href="7th-grade.aspx">7th Grade</a></li>
            <li><a href="8th-grade.aspx">8th Grade</a></li>
            <li><a href="9th-grade.aspx" class="selected">9th Grade</a></li>
            <li><a href="10th-grade.aspx">10 Grade</a></li>
            <li><a href="11th-grade.aspx">11th Grade</a></li>
            <li><a href="12th-grade.aspx">12th Grade</a></li>
            <li><a href="college-checklist.aspx">College Checklist</a></li>
            <li><a href="savings-growth-calculator.aspx">Savings Growth Calculator</a></li>
        </ul>
    </div>

CSS

.second-level-menu-vertical {
        float: left;
        font:bold 110% 'verdana', sans-serif;
        margin-left: -10px;
        margin-top: 57px;
        text-transform: lowercase;
        width: 155px;
        z-index: 200;
        position: absolute;
    }
    .second-level-menu-vertical ul {
        padding-bottom: 10px;
    }
    .second-level-menu-vertical li {
        background: none;
        margin: 0;
        padding: 0 0.75em;
    }
    .second-level-menu-vertical li a,
    .second-level-menu-vertical li a:link,
    .second-level-menu-vertical li a:visited,
    .second-level-menu-vertical li a:hover,
    .second-level-menu-vertical li a:active {
        border-bottom: 1.75px dashed #C9C9C9;
        color: #666;
        display: block;
        padding: 1em 0;
        text-decoration: none;
    }
    
    .second-level-menu-vertical li a:hover,
    .second-level-menu-vertical li a.selected,
    .second-level-menu-vertical li a.selected:link,
    .second-level-menu-vertical li a.selected:visited,
    .second-level-menu-vertical li a.selected:hover,
    .second-level-menu-vertical li a.selected:active {
        background-color: #FDCC00;
        border-radius: 7px;
        color: #000;
        text-decoration: underline;
    }

JavaScript

// you want the path of the location, 
    // as that should not include the querystring, 
    // if you have one
    var pathGroup = location.pathname.split("/");
    // split it by the / character
    // then get the last element... this should be your
    // current page name
    var currentPage = pathGroup[pathGroup.length - 1];
    // get the top level element, and get the first
    // element returned, as getElementsByClassName 
    // returns an array
    var sideMenu = document.getElementsByClassName("second-level-menu-vertical")[0];
    // get all the li items from that item
    var sideLinks = sideMenu.getElementsByTagName("li");
    // loop through the list returned
    for(var link in sideLinks){
        // make sure that you're dealing with an object
        if(typeof sideLinks[link] == "object"){
            // get the <a/> tag from inside the li
            var aTag = sideLinks[link].getElementsByTagName("a")[0];
            // get the <a/> tag's href
            var href = aTag.getAttribute("href");
            
            if(href == currentPage){
                // if the href matches your currentPage
                // value, set the class to 'selected'
                aTag.setAttribute("class","selected");
            }
        }
    }