JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<!-- Let's get the parent element for the target node and add a class of "active" to it -->
<ul id="nav">
    <li><a href="/" id="home">Home</a></li>
    <li><a href="/about" id="about">About Us</a></li>
    <li><a href="/contact" id="contact">Contact Us</a></li>
</ul>
<input type="button" onclick="targetClass()" value="Target the Class"/>
<input type="button" onclick="prevNextSibling()" value="Target Next and Previous Sibling"/>

CSS

.active{background:red}
.previous{background:green}
.next{background:yellow}

JavaScript

function targetClass()
{
 document.getElementById("about").parentNode.setAttribute("class", "active");
}
// This block of code adds a Class to Previous and Next Sibling Nodes
function prevNextSibling()
{
    // get "about" parent, then its previous sibling and apply a class
document.getElementById("about").parentNode.previousElementSibling.setAttribute("class", "previous");
    // get "about" parent, then its next sibling and apply a class
    document.getElementById("about").parentNode.nextElementSibling.setAttribute("class", "next");
}