[jQuery] Ajax and CSS classes

[Shaun Kester]

Using
IE6 / WinXP SP2 / jQuery 1.2.3.pack

Given an HTML nav list...

<div id="navtoplist">
<ul>
<li class="" id="tabHome"><a href="#" id="lnkHome">Home</a></li>
<li class="current" id="tabSCFOX"><a href="#" id="lnkSCFox"
class="TabLinks" rel="SCFOX">SCFox</a></li>
</ul>
</div>

and CSS

#navtoplist a, #navtoplist a:link, #navtoplist a:visited {
        float: left;
        display: block;
        color: #fff;
        margin: 0 1px 0 0;
        padding: 5px 10px;
        text-decoration: none;
        letter-spacing: 1px;
        background: #333 url(../images/button.png) repeat-x;
        border-bottom: 1px solid #fff;
}

#navtoplist .current a {
        background: #5190b2 url(../images/button_current.png) repeat-x;
        border-color: #5190b2;
}

...in an HTML page the li element with a class of current correctly
sets the background image of the child 'a' element to a different
image if set to a class of 'current'.

If I load the menu with $(xxx).load and set the current tab with

$("#navtoplist ul li").removeClass();
$("#navtoplist ul li#"+TabID).addClass("current");

the background image changes in FF2, but refuses to in IE6.

More simply, plain html in the html page works fine, but when the same
html fragment is loaded with ajax and the callback changes the classes
of the elements, the background image does not come through for IE6
only, FF2 works fine. Firebug says everything is fine, but the IE
developer toolbar says the class has not changed.

Any insight appreciated. TIA.

~Shaun

Any insight appreciated.