JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="nav navbar-nav navbar-right navmenu">       
    <li data-menuanchor="home" class="active">
        <a href="#home"><span>HOME</span></a>
    </li>
    <li data-menuanchor="page">
        <a href="#page"><span>ABOUT US</span></a>
    </li>
    <li id="gallery" data-menuanchor="gallery">
        <a href="#gallery"><span>PROJECTS</span></a>
    </li>
    <li data-menuanchor="aboutus">
        <a href="#aboutus"><span>VIDEO</span></a>
    </li>
    <li id="contact" data-menuanchor="contact" class="cont">
        <a href="#contact"><span>CONTACT</span></a>
    </li>
</ul>

<div class="col-xs-12" id="element">
    This element will be hidden when contact is active
</div>
</div>

CSS

#element{
    padding:20px;
    background: red;
    color: white;
}

JavaScript

jQuery(".nav li a").click(function(){
	jQuery(".nav li").removeClass('active');
    var parentLi = jQuery(this).parent('li');
    parentLi.addClass('active');
    if(parentLi.data('menuanchor') == 'contact'){
    	jQuery("#gallery").hide();
    }else{
    	jQuery("#gallery").show();
    }
})