How to display text based on active nav item [duplicate]

I want to display the text of into a tag, but have no idea how to do so.
I have a class=”on” for the active , and I want it to change dynamically, i.e. when the class=”on” shifts to another , the text of the will also change according.

I’m new to coding, and would like to have some help please. Thanks guys!

Here is the nav:

<nav>
<a class="on">Product 1</a>
<a>Product 2</a>
<a>Product 3</a>
<a>Product 4</a>
</nav>

And this is the :

<h3 id="product-title">Product 1</h3>