<script type="text/javascript">
$(document).ready(function() {
  $('#navi a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');
});
</script>

<ul id="navi">
  <li><a href="#">About MHG</a></li>
  <li><a href="#">Workout Programs</a></li>
  <li><a href="#">Fitness Tips</a></li>
  <li><a href="#">Contact Us</a></li>
  <li><a href="#">Read Our Blog</a></li>
</ul>

<ul id="navi">
    <li><a class="menu" href="#">About MHG</a></li>
    <li><a class="menu" href="#">Workout Programs</a></li>
    <li><a class="menu" href="#">Fitness Tips</a></li>
    <li><a class="menu" href="#">Contact Us</a></li>
    <li><a class="menu" href="#">Read Our Blog</a></li>
  </ul>

$('a.menu').click(function(){
    $('a.menu').removeClass("active");
    $(this).addClass("active");
});

$("#navi a").live("click", function(){
  $("#navi a").removeClass("active");
  $(this).addClass("active")
});

$('a.menu').hover(

function () {
    $(this).addClass("active");
},

function () {
    $('a.menu').removeClass("active");
});

<div id="nav">
    <ul>
        <li class="active"><a href="index.php">Index</a></li>
        <li><a href="about.php">About</a></li>
        <li><a href="member.php">Member</a></li>
        <li><a href="project.php">Project</a></li>
        <li><a href="activity.php">Activity</a></li>
    </ul>
</div>

$(function () {
    let url = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
    $("#nav ul li a").each(function () {
        if ($(this).attr("href") == url || $(this).attr("href") == '') {
            $(this).closest('li').addClass("active");
        }
    })
});