JSFiddle - React, Tailwind, and code Playground

by Harsha Bopuri

HTML

<nav class="navbar navbar-inverse navbar-fixed-top" role = "navigation">
               <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                         <span class="icon-bar"> </span>
                         <span class="icon-bar"> </span>
                         <span class="icon-bar"> </span>

                    </button>
                     <a class="navbar-brand" href="index.php">ILM</a>
               </div>

               <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                         <li ><a href="index.php">Home</a></li>
                         <li ><a href="why.php">Discuss</a></li>
                         <li ><a href="aboutus.php">About Us</a></li>
                         <li ><a href="contacts.php">Contact</a></li>
                         <li class="dropdown">
                          <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Social <b class="caret"> </b></a>
                          <ul class="dropdown-menu">
                            <li class='active'> <a href="http://www.facebook.com">Facebook</a></li>
                            <li> <a href="#">Twitter</a></li>
                            <li> <a href="#">Linked IN</a></li>
                            <li> <a href="#">You Tube</a></li>
                          </ul>
                          </li>
                    </ul>
               </div>
        </nav>

CSS

li.active{
background:#c30;
    color:#fff;
    padding:10px;
}

JavaScript

if(window.location.href.contains("index.php")){
resetActiveTab("index.php");
}
else if(window.location.href.contains("why.php")){
resetActiveTab("why.php");
}
else if(window.location.href.contains("aboutus.php")){
resetActiveTab("aboutus.php");
}

function resetActiveTab(mySelector){
$(".navbar-nav li").each(function( key, value ) {
    //alert($(value).attr("class"));
 $(value).removeClass("active");
    if( $(value).find("a").attr("href") == mySelector){
        $(value).addClass("active");
    }
  
});
}