How to Dynamically set class name of <LI> Element?

I have a header SSI include but I want to have it so the class is dynamically assigned "current" when it is on the corresponding page. here is an example of the header include. I can modify the code of the header if needed. Forexample, if I was on the "location.html" page, the 2nd LI would have the class set to "current" and not the first LI in the example..

<header id="header" class="container clearfix">

	<a href="index.html" id="logo">
		<img src="img/logo.png" alt="SmartStart">
	</a>

	<nav id="main-nav">
		
		<ul>
			<li class="current">
				<a href="index.html" data-description="The Basic Info">The House</a>
			</li>
			<li>
				<a href="location.html" data-description="Where's It Located">The Map</a>
			</li>
			<li>
				<a href="rates.html" data-description="Booking Info">Rates & Avalability</a>
			</li>
			<li>
				<a href="reviews.html" data-description="What'd They Think">Reviews</a>
			</li>
			<li>
				<a href="contact-us.html" data-description="Need More Info">Contact</a>
			</li>
		</ul>

	</nav><!-- end #main-nav -->
	
</header><!-- end #header -->

Select allOpen in new window

How would I do this using Javascript?
Thanks!