Question

Update Thanks to @mrtsherman verifying my code was fine, I dove into the CSS and found that for no reason in particular, ie7 wanted a bit of extra padding on the bottom. This is why I hate ie7.

I have some pretty simple code automatically adding a class to the nav item corresponding with the current page. Works fine in all browser including ie8 and ie9 but seems to just not function in ie7. Who’s broken, ie7 or me?

html:

<div id="navbar">
<ul>
<li class="navitem"><a href="about.html">about us</a></li><!--navitems-->
<li class="navitem"><a href="purchase.html">purchase</a></li><!--navitems-->
<li class="navitem"><a href="sales.html">sales</a></li><!--navitems-->
<li class="navitem"><a href="contact.html">contact</a></li><!--navitems-->
</ul>
</div><!--navbar-->

js file

$(function(){
        var full_url = document.URL; 
        var url_array = full_url.split('/')
        var $last_segment = url_array[url_array.length-1]; 
        $('#navbar li a').each(function(){
            var $href = $(this).attr('href');
            if ( ($href == $last_segment) || ($href == '') ) {
                $(this).addClass('curr');
            } else {
                $(this).removeClass('curr');
            }
        });
    });

Answer 1

The more I think about it, the more I think the problem must have to do with the split of your url. If there is a trailing slash then the $last_segment will be an empty string, thus never matching. You should check and trim that before splitting.

http://jsfiddle.net/zGbJx/2/

var full_url = "http://www.mysite.com/contacts.html/";
var full_url = "http://www.mysite.com/contacts.html";
//trim trailing slash
if (full_url.charAt(full_url.length - 1) == '/') {
    full_url = full_url.substring(0, full_url.length - 1);
}