Changing The Color of Active Navigation Bar

If you want to keep the state of the active item then you need to include the navbar layout in every html file. For example if you click on Research then in the research.html your navbar must be

<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 ><a href="#skdill" >skisll</a></li>
        <li ><a href="#skill">skill</a></li>
        <li class="active"><a href="#research">research</a></li>
        <li ><a href="#">Link</a></li>
                 </ul>
    </div>
  </div>
</div>

And so on for all your links.

EDIT
You can use JavaScript and do the trick:

<!DOCTYPE html>
<html>
   <head>
     <script src="js/jquery.min.js"></script>
     <script src="js/bootstrap.min.js"></script>
     <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
     <link href="css/bootstrap-responsive.min.css" rel="stylesheet">
     </style>
  </head>

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

  <body>
     <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="home"><a href="#home">Home</a></li>
                     <li id="skill"><a href="#skill">Skill</a></li>
                     <li id="research"><a href="#research">Research</a></li>
                     <li id="link"><a href="#link">Link</a></li>
                 </ul>
              </div>
           </div>
        </div>
     </div>
  </body>
</html>

Demo:
http://jsfiddle.net/Ag47D/3/

Changing the color of active nav-item

The issue is because the .nav-item > a:hover is more specific than .navbar-nav > .active. To fix this, remove the !important operator (as you should avoid it at all costs) and make the rule you want to override more specific.

.navbar-nav > .active > a {
  color: aqua;
  background-color: chartreuse;    
}
.nav-item > a:hover {
  color: aqua;
}

$(document).ready(function() {  "use strict";
  $('ul.navbar-nav > li').click(function(e) {    e.preventDefault();    $('ul.navbar-nav > li').removeClass('active');    $(this).addClass('active');  });});

.navbar-nav > .active > a {  color: aqua;  background-color: chartreuse;}.nav-item > a:hover {  color: aqua;}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" /><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<ul class="navbar-nav">  <li class="nav-item active">    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>   </li>  <li class="nav-item">    <a class="nav-link" href="#">Features</a>   </li>  <li class="nav-item">    <a class="nav-link" href="#">Pricing</a>   </li>  <li class="nav-item">    <a class="nav-link disabled" href="#">Disabled</a>   </li></ul>

CSS: How to change colour of active navigation page menu

I think you are getting confused about what the a:active CSS selector does. This will only change the colour of your link when you click it (and only for the duration of the click i.e. how long your mouse button stays down). What you need to do is introduce a new class e.g. .selected into your CSS and when you select a link, update the selected menu item with new class e.g.

<div class="menuBar">
    <ul>
        <li class="selected"><a href="index.php">HOME</a></li>
        <li><a href="two.php">PORTFOLIO</a></li>
        ....
    </ul>
</div>

// specific CSS for your menu
div.menuBar li.selected a { color: #FF0000; } 
// more general CSS
li.selected a { color: #FF0000; }

You will need to update your template page to take in a selectedPage parameter.

React Navigation bar change background on active link

Apart from using state, the other options are:

1) Simply use NavLink and activeClassName. It will automatically read url and adjust the style based on your url pathname

<NavLink activeClassName="active" className={"tab"} to="/contact">Contact</NavLink>

2) Use useHistory hook and read the current url and dynamically adjust the styles

...
const currentRoute = useHistory().location.pathname.toLowerCase();
...
<Link className={currentRoute.includes("home") ? "tab active" : "tab"} to="/home"> 
 Home
</Link>
...

Working copy of code sample (in the codesandbox)

Full Code Snippet

import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import { useHistory, NavLink } from "react-router-dom";
import "./styles.scss";
const Nav = props => {
  const currentRoute = useHistory().location.pathname.toLowerCase();
  return (
    <div className="tab-bar">
      <Link
        className={currentRoute.includes("home") ? "tab active" : "tab"}
        active
        to="/home"
      >
        Home
      </Link>
      <Link
        className={currentRoute.includes("about") ? "tab active" : "tab"}
        to="/about"
      >
        About
      </Link>
      <NavLink activeClassName="active" className={"tab"} to="/contact">
        Contact
      </NavLink>
    </div>
  );
};

export default Nav;

Changing The Color of Active Navigation Bar