Jquery ui jQuery导航更改类，但返回必要的类

因此，我正在尝试在我的新网站重新设计上做一个有趣的互动导航。总体思路如前所述。我想模拟一个URL栏，就像当你把鼠标悬停在导航栏上的不同按钮上时，它会改变栏中的URL

以下是网站：

正如你所看到的，当有人来到主页，也就是博客，我希望URL栏上写着“drodle.com/blog”。当您将鼠标悬停在博客图标上时，我希望drodle.com部分变为灰色，而/blog部分变为白色。我把所有的图像都放在一张精灵纸上

因此，整个主题是您所在的任何页面，默认情况下，我希望相应的URL以白色显示URL的图像，drodle.com以白色显示，/which以灰色显示。每当您将鼠标悬停在导航链接上时，我希望url栏显示相应的url图形，drodle.com为灰色，/which为白色。但当你鼠标移出导航按钮时，我希望一切都恢复到原始状态，这样它就可以再次显示当前页面

如果你需要更多的澄清，请告诉我

这是我的密码：

jQuery

$(document).ready(function(){

    $('a.navlink.blog').hover(function () {
        $('div.url_text').addClass('blog').addClass('up');
    }, function () {
        $('div.url_text').removeClass('up').addClass('blog');
    });

});

HTML

---

如果你想要这样的东西：

以下是您的代码：

var defaultLogoClass = "";

$(document).ready(function(){

        defaultLogoClass = $('div.url_text').attr('class');

        $('a.navlink.blog').hover(function () {
            $('div.url_text').attr("class",'url_text blog up');
        }, function () {
            resetLogo();
        });

  $('a.navlink.about').hover(function () {
            $('div.url_text').attr("class",'url_text about up');
        }, function () {
            resetLogo();
        });

    });

function resetLogo(){
  $('div.url_text').attr("class",defaultLogoClass);
}

---

我这样做是为了blog&about链接，所以你可以复制粘贴其他链接。

用实际文本制作你的徽标可能更容易，只需使用

：after

伪元素添加彩色URL块。你想让我们做什么？我想在你将鼠标悬停在导航上时更改类，但当你将鼠标移出时，我希望HTML返回到页面上硬编码的内容。这太完美了！但有一件事。根据您所处的页面，resetlogo功能必须更改。假设im在联系人页面上，切除功能必须重置为名为“url\u text contact down”的类，我如何合并该部分？

div.url_bar {
    width: 347px;
    height: 47px;
    margin: 60px 0 0 0;
    padding: 0;
    background: url(images/url_bar.png) no-repeat center center;
    float: left;
}

    div.url_text.blog {
        width: 175px;
        height: 24px;
        margin: 14px 0 0 15px;
        padding: 0;
        background: url(images/url_bar_text.png) no-repeat;
    }

    div.url_text.blog.down {
        background-position: -16px -14px;
    }

    div.url_text.blog.up {
        background-position: -273px -14px;
    }

    div.url_text.about {
        width: 190px;
        height: 24px;
        margin: 14px 0 0 15px;
        padding: 0;
        background: url(images/url_bar_text.png) no-repeat;
    }

    div.url_text.about.down {
        background-position: -16px -49px;
    }

    div.url_text.about.up {
        background-position: -273px -49px;
    }

var defaultLogoClass = "";

$(document).ready(function(){

        defaultLogoClass = $('div.url_text').attr('class');

        $('a.navlink.blog').hover(function () {
            $('div.url_text').attr("class",'url_text blog up');
        }, function () {
            resetLogo();
        });

  $('a.navlink.about').hover(function () {
            $('div.url_text').attr("class",'url_text about up');
        }, function () {
            resetLogo();
        });

    });

function resetLogo(){
  $('div.url_text').attr("class",defaultLogoClass);
}