单击后如何使菜单保持活动状态？

Question

我希望菜单一次而不是再次复制它，并根据重定向到的页面更改活动类。

如果可能，没有JavaScript，但如果不能使用CSS，那么JavaScript就可以

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">

  <div class="navbar-header">

    <button type="button" id="togglenav" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <h3 style=" padding-left: 15px"> Malel's Boutique </h3>
  </div>


  <div class="collapse navbar-collapse navbar-collapse">
    <ul class="nav navbar-nav">
      <li>
        <a href="product.php"> <span class="glyphicon glyphicon-glass" aria-hidden="true"></span>&nbsp;Product</a>
      </li>
      <li><a href="order.php"><span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>&nbsp;Orders</a></li>
      <li><a href="#"><span class="glyphicon glyphicon-usd" aria-hidden="true"></span>&nbsp;Sales</a></li>
      <li><a href="member.php"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>&nbsp;Member</a></li>
      <li><a href="settings.php"><span class="glyphicon glyphicon-cog" aria-hidden="true"></span>&nbsp;Settings</a></li>
      <li><a href="add.php"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>&nbsp; Employee</a></li>
      <li> <a href="#message" data-toggle="modal"><span class="glyphicon glyphicon-log-out" aria-hidden="true"></span>&nbsp; Sign Out</a></li>
    </ul>


  </div>
</nav>
<div style="top: 20%" class="modal fade" id="message" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header" style=" background-color: skyblue">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <p style=" font-size: 19px; color: black">Sign out? </p>
      </div>
      <div class="modal-body">
        <p style="color: black">Are you sure you want to log out?</p>
      </div>
      <div class="modal-footer">
        <button Style=" margin-left: 160px;" type="button" class="btn btn-default" data-dismiss="modal"><b>NO</b></button>
        <button type="button" class="btn btn-default"><b>Yes</b></button>
      </div>

    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->