One way I've been implementing my navbar on each page is by using the following code at the bottom of the page within script tags:
$("#navbar-partial").load("navbar.html)The code for the navbar list looks like this:
<ul id="main-nav" class="nav nav-sidebar">
<li>
<a href="a.html"></a>
</li>
<li>
<a href="b.html"></a>
</li>
<li>
<a href="c.html"></a>
</li>
<li>
<a href="d.html"></a>
</li>
</ul>
I've attempted to make it interactive with the following code, but haven't had much success:
$(document).ready(function () {
$('.nav li').on('click', function (e) {
$(this).addClass('active').siblings().removeClass('active');
});
});
This code is placed within the same script tag at the bottom of the html page, following the load call.
If you have any suggestions or tips on how to improve this setup, they would be greatly appreciated!
Thanks