Change nav button state when using SSI

Question

I am going to be redesigning a website soon and I am going to use SSI's.  Is there a way to change the state of the nav button in relation to the page that is being viewed if the nav bar is in the SSI?  If not, what is the best way to achieve this?
I was thinking that the pages specific to the nav buttons (Home, Contact, etc) can not have the nav bar in the SSI and it must be in the main file.  If the design is changed in the future the pages containing specific nav button states must be changed individually.
Thanks for any input.

Answer 1

<script src="SpryAssets/SpryDOMUtils.js" type="text/javascript"></script>
This links to the file that is required for the Spry Element Selector
function InitPage(){
Spry.$$('#MenuBar1 li').forEach(function(node){
    var a=node.getElementsByTagName("a")[0]; // finds all a elements inside the li, but we only want the first so [0]
    if(a.href == window.location){
        Spry.Utils.addClassName(node,"activeMenuItem");
This function checks the list items (li) within div ID MenuBar1 and retrieves the the link within the anchor (a) element. If the link (a.href) is the same as the URL (window.location) then add a class called activeMenuItem to the list item.
Spry.Utils.addLoadListener(InitPage);
When the page loads, this will trigger the function
.activeMenuItem a {
    background:#a59a84 !important;
    color:#ffffff !important;
We need to add style rules for the anchor element within the list item with the class of activeMenuItem.
Gramps