How To Show ACTIVE Menu Item

[Eyesee]

Have the following Sidebar menu setup, using CSS for layout. What are the options to show the ACTIVE menu item please, either in CSS or JS?

<nav class="w3-sidebar w3-collapse w3-light-grey " style="z-index:1;width:400px;">
  <!-- Header -->
  <header class="w3-menu-sumf" style="padding-top:90px;padding-left:25px">
    <b>CONTENTS</b>
  </header>

  <div class="w3-bar-block">
    <a href="Chapter01.html" class="w3-bar-item w3-button w3-padding">&nbsp; Chapter 1</a>
    <a href="Chapter02.html" class="w3-bar-item w3-button w3-padding">&nbsp; Chapter 2</a>
    <a href="Chapter03.html" class="w3-bar-item w3-button w3-padding">&nbsp; Chapter 3</a>
    <a href="Chapter04.html" class="w3-bar-item w3-button w3-padding">&nbsp; Chapter 4</a>
    <a href="Chapter05.html" class="w3-bar-item w3-button w3-padding">&nbsp; Chapter 5</a>
    <a href="Chapter06.html" class="w3-bar-item w3-button w3-padding">&nbsp; Chapter 6</a>
    <a href="Chapter07.html" class="w3-bar-item w3-button w3-padding">&nbsp; Chapter 7</a>
    <a href="Chapter08.html" class="w3-bar-item w3-button w3-padding">&nbsp; Chapter 8</a>
  </div>

</nav>

The classes for the menu items are as per the w3.css file, no changes.

Thanks.
Ian C