JSFiddle - React, Tailwind, and code Playground

<li><a href="#">Home</a></li> <li><a href="#">News</a></li> <li><a href="#">Contact</a></li> <li><a href="#">About</a></li> <li><a href="#">Division</a></li> <li><a href="#">Career</a></li> <li><a href="#">MChoice's</a></li>

HTML

<link rel="stylesheet" href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css">
     <div class="navbar">
        <div class="navbar-fixed-top">
           <div class="container" style="width: auto;">
              <div class="nav-collapse" id="nav-collapse">
                 <ul class="nav" id="nav">
                     <li id="News"><a href="#News">News</a></li>
                     <li id="Contact"><a href="#Contact">Contact</a></li>
                     <li id="About"><a href="#About">About</a></li>
                     <li id="Division"><a href="#Division">Division</a></li>
                     
                     <li id="Career"><a href="#Career">Career</a></li>
                     <li id="skill"><a href="#skill">Skill</a></li>
                     <li id="research"><a href="#research">Research</a></li>
                     <li id="MChoice"><a href="#MChoice">MChoice's</a></li>                     


                 </ul>
              </div>
           </div>
        </div>
     </div>

CSS

.navbar #nav > .active > a {
    color: yellow;
}

JavaScript

$(function() {
        $('#nav li a').click(function() {
           $('#nav li').removeClass();
           $($(this).attr('href')).addClass('active');
        });
     });