JSFiddle - React, Tailwind, and code Playground

by imsky

HTML

<ul id="main_menu">
        <li><a href="about">About Us</a>
    <ul>
                 <li><a href="#hello">Hello</a></li>
                 <li><a href="#world">World</a></li>
            </ul>
    </li>
           
</ul>
        <p id="hello">Hello</p>
        <p id="world">World</p>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script src="https://raw.github.com/cowboy/jquery-hashchange/v1.3/jquery.ba-hashchange.min.js"></script>
        <script>            
            $(function(){
                $(window).hashchange(function(){
                   $("#main_menu li ul a")
                   .removeClass("active")
                   .filter("[href='"+window.location.hash+"']")
                   .addClass("active")
                }).trigger("hashchange");
            })
        </script>

CSS

p {margin:1000px 0px;padding:40px 0px}
#main_menu {position:fixed;top:0px}

li {display:inline}
#main_menu li ul a.active {
background: #b5121b;
}