How reload (refresh) styles of an element (using cufon font) using jquery

问题

please see web site below that i designed (it's from a template):
http://noorjamali.soscharge.com
my problem is about menu colors after clicking on every menu.
for testing that try click on ABOUT ME menu and you will see HOME menu is still white and you should hover it by mouse for getting result and turn it's color back to gray.
please don't test the other menus, because i haven't add jquery codes for them.
my menu codes is like below :

        <div class="nav">
            <div class="nav_shadow">
                <ul class="menu">
                    <li id="item-464" class="current active"><a href="Default.aspx">HOME </a></li>
                    <li id="item-465"><a href="javascript:AboutMeClick();">ABOUT ME </a></li>
                    <li id="item-444"><a href="javascript:QuickProfileClick();">QUICK PROFILE </a></li>
                    <li id="item-207"><a href="javascript:CertificationsClick();">CERTIFICATIONS </a></li>
                    <li id="item-467"><a href="javascript:ProjectsClick();">PROJECTS </a></li>
                </ul>
            </div>
        </div>

and AboutMeClick() function is like this :

var $j = jQuery.noConflict();
       function AboutMeClick() {
            $j('#header .nav .nav_shadow .menu li').removeClass('current active');
            $j('#header .nav .nav_shadow .menu li#item-465').addClass('current active');

            if ($j('#header').css('top') != -522) {
                $j('#lveis-wrapper_3').animate({
                    opacity: 0.0
                }, 1200, function () {
                    // Animation complete.

                    $j('#header').animate({
                        top: -522
                    }, 1000, function () {
                        // Animation complete.
                        if ($j('#QuickProfile').css('dispay') != 'none') {
                            $j('#QuickProfile').slideUp(1500, function () { $j('#AboutMe').slideDown(1500); });
                        }
                        else if ($j('#Certifications').css('dispay') != 'none') {
                            $j('#Certifications').slideUp(1500, function () { $j('#AboutMe').slideDown(1500); });
                        }
                        else if ($j('#Projects').css('dispay') != 'none') {
                            $j('#Projects').slideUp(1500, function () { $j('#AboutMe').slideDown(1500); });
                        }
                    });

                });
            }
            else {
                if ($j('#QuickProfile').css('dispay') != 'none') {
                    $j('#QuickProfile').slideUp(1500, function () { $j('#AboutMe').slideDown(1500); });
                }
                else if ($j('#Certifications').css('dispay') != 'none') {
                    $j('#Certifications').slideUp(1500, function () { $j('#AboutMe').slideDown(1500); });
                }
                else if ($j('#Projects').css('dispay') != 'none') {
                    $j('#Projects').slideUp(1500, function () { $j('#AboutMe').slideDown(1500); });
                }
            }
        }

and related css to that menu is like this :

ul.menu > li.active > a:link, ul.menu > li.active > a:visited
{
    color: rgb(255, 255, 255) !important;
}
ul.menu li a:hover, ul.menu li a:active, ul li a:focus
{
}

i am so confused about this issue.
why these jquery codes can't do their jobs :

    $j('#header .nav .nav_shadow .menu li').removeClass('current active');
    $j('#header .nav .nav_shadow .menu li#item-465').addClass('current active');

where is the conflict about this issue and how can i fix it?
also i really don't know where is the place of setting menu colors to grey!!
is there a way to simulate hover using jquery for getting results?

thanks for attention

EDIT:
i know that problem is for cufon-yui.js -> but how can i fix that?

回答1:

You are using cufon font,try to call

Cufon.refresh();

just like

$j('#header .nav .nav_shadow .menu li').removeClass('current active');
$j('#header .nav .nav_shadow .menu li#item-465').addClass('current active');
Cufon.refresh(); // Will refresh all cufon text
//Or
Cufon.refresh('#header .nav .nav_shadow .menu li'); // Will refresh only selected objects

来源：https://stackoverflow.com/questions/9906679/how-reload-refresh-styles-of-an-element-using-cufon-font-using-jquery

标签

jquery

cufon