尝试使用JQuery突出显示当前导航图标
尝试使用JQuery突出显示当前导航图标
提问于 2012-09-26 21:10:08
我想知道如何在我的网站上突出显示当前的导航图标。它变得更加复杂，因为除了博客部分，所有其他导航链接都会转到同一页面上的不同部分。我希望主页图标在所有情况下都被突出显示，除非用户在我的博客部分。我使用CSS将图标的不透明度设置为0.5，并使用JQuery将不透明度更改为1来突出显示一个类添加的图标。我就快到了，但是当用户转到我的博客部分然后返回主页部分时，图标不会突出显示(除非我刷新浏览器)。这是我的JQuery：
// change opacity of nav icons
$('#nav-home, #nav-port, #nav-exp, #nav-cont, #nav-blog').hover(function(){
$(this).fadeTo(200, 1);
}, function(){
$(this).fadeTo(200, 0.5);
});
// highlight current nav icon
var queryString = location.search.replace('?','').split('=');
$('#nav-blog').bind('load click', function(){
if(queryString[1] == 'blog-home' || queryString[0] == 'article')
$(this).addClass('nav-current');
});
$('#nav-home, #nav-port, #nav-exp, #nav-cont').bind('load click', function(){
if(queryString[1] == 'home' || !queryString[1])
$('#nav-home').addClass('nav-current');
}); 谢谢!
编辑:对不起！这是我的网站http://www.jonhudsonweb.com
编辑:弄清楚了！！但我还不能回答我的问题，因为我还不够好：
这是我的解决方案：
// highlight current nav icon
var queryString = location.search.replace('?','').split('=');
$(window).bind('load unload', function(){
if(queryString[1] == 'blog-home' || queryString[0] == 'article')
$('#nav-blog').addClass('nav-current');
});
$(window).bind('load unload', function(){
if(queryString[1] == 'home' || !queryString[1])
$('#nav-home').addClass('nav-current');
});对我来说+1！
耶。
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-09-27 16:42:20
我的解决方案是：
// highlight current nav icon
var queryString = location.search.replace('?','').split('=');
$(window).bind('load unload', function(){
if(queryString[1] == 'blog-home' || queryString[0] == 'article')
$('#nav-blog').addClass('nav-current');
else
$('#nav-home').addClass('nav-current');
});Stack Overflow用户
发布于 2012-09-27 16:57:17
乔恩，你的解决方案在我看来有点笨拙。为什么不添加一个.active类到你想要经常显示的图标上，并用CSS设置样式呢？
此外，您真的应该使用一个统一所有导航图标的类，并为您的.hover()方法引用该类，而不是列出每个ID。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12602512
复制相关文章
相似问题
腾讯云开发者
