如何使用jQuery重新加载(刷新)元素的样式(使用cufon字体) [英] How reload (refresh) styles of an element (using cufon font) using jquery

问题描述

请参阅下面我设计的网站(来自模板):
http://noorjamali.soscharge.com
我的问题是单击每个菜单后的菜单颜色.
要进行测试，请尝试单击关于我"菜单，您将看到"HOME"菜单仍为白色，应将鼠标悬停以获取结果，然后将其颜色变回灰色.
请不要测试其他菜单，因为我尚未为其添加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>

和AboutMeClick()函数如下:

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); });
                }
            }
        }

和与该菜单相关的css如下:

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
{
}

我对这个问题很困惑.
为什么这些jquery代码无法完成其工作:

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');

关于此问题的冲突在哪里，我该如何解决?
我真的也不知道将菜单颜色设置为灰色的地方！
有没有一种方法可以模拟使用jquery悬停以获得结果?

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?

感谢关注

我知道问题出在cufon-yui.js->但是我该如何解决?

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

推荐答案

您正在使用cufon字体，尝试调用

You are using cufon font,try to call

Cufon.refresh();

就像

$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

这篇关于如何使用jQuery重新加载(刷新)元素的样式(使用cufon字体)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！