JSFiddle - React, Tailwind, and code Playground

HTML

<div class="primaryNav fl">
<ul id="hd_vertical" class="productNav">
    
<li id="info" class="validation">
<span class="info navclass">Test</span>
<a class="info" href="http://validator.w3.org/">Test1</a>
</li>
    
<li id="learn" class="site">
<span class="learn hdclass">fi</span>
<a class="learn" href="http://www.w3schools.com/">Buses</a>
</li>
    
</ul>
</div>

CSS

.validation,.site {
    border: 1px solid #ccc;
    padding: 10px;
    width: 78px;
    cursor: pointer;
}

JavaScript

var changeLocation = function(id) {
  var _url = document.getElementsByClassName(id)[1].getAttribute('href');
  location.href = _url;   
}

document.getElementById("hd_vertical").addEventListener("click",function(e) {
        if(e.target.nodeName == "LI") { 
            var _anchor = e.target.id;
            changeLocation(_anchor);
        } else if(e.target.nodeName == "SPAN") {
            var span = e.target;
            var li = span.parentNode;
            var _anchor = li.id;   
            changeLocation(_anchor);
    }
});