Jquery menu states/addClass, not working with Iframe.

Jquery menu states/addClass, not working with Iframe.

I've got a problem.

I've built a navigation page to be used in an iframe across a site.  I've made menus like this in PHP and using arrays but I cannot use PHP here so I thought I could reproduce it in JQuery.

I am able to addClass "on" to selected menu items using the following:
  1. <script type="text/javascript">
    $(function(){
    $page = jQuery.url.attr("file");
    if(!$page) {
    $page = 'index.html';
    }
    $('ul.navigation li a').each(function(){
    var $href = $(this).attr('href');
    if ( ($href == $page) || ($href == '') ) {
    $(this).addClass('on');
    } else {
    $(this).removeClass('on');
    }
    });
    });
    </script>














It's using a URL parser to grab the current page and compare links in the navigation and setting a state or class "on" to the current matching page.  This works fine, however, when inside an Iframe I run into trouble.

I'm not that great with Jquery, but I'm assuming some sort of "window.parent.document" has to be added somewhere.

I have a test page set up that I am working on:

http://skylightspecialist.com/Solutions/Marketing_Tools/iframe_test.htm

The navigation for the test page:
  1.         <ul class="navigation">
                <li><span><a class="" target="_parent" href="iframe_test.htm">Home</a></span></li>
                <li><span><a class="" target="_parent" href="about_test.htm">About</a></span></li>
                <li><span><a class="" target="_parent" href="solutions_test.htm">Solutions</a></span></li>
                <li><span><a class="" target="_parent" href="contact_test.htm">Contact</a></span></li>
            </ul>




The Iframe:
  1.     <iframe src="main_nav_test.htm" id="menuframe" width="137px" frameborder="0" height="900px">
            <p>Your browser does not support iframes.</p> 
        </iframe>

Thanks