我在此页面的导航栏中有三页。每个叶子部分都是一个导航链接，由具有绝对定位和不同 z 索引的 div 类组成，这样我就可以在棕色叶子上淡入绿色叶子。
页面之间还有淡入淡出过渡，这是基于CSS技巧上的动态页面更改方法，它使用hashchange来更改页面。
您可以在 this jsfiddle 上看到与导航栏上叶子褪色相关的所有代码（该脚本还包含页面之间转换的代码）。
我正在努力解决的部分是如何引用当前页面的 div 类“.current”（其中包含淡入和淡出的绿叶）。我需要这样做，以便当网站首次打开时，无论是在主页还是在关于页面上，当前页面的绿叶在页面加载时设置为 opacity:1 （这就是当用户单击页面来加载它，但不是在页面首次加载时）。
我可以在每个页面的 CSS 中设置 .current 类的不透明度，但是使用 hashchange 方法，只会更改 #main-content 的 HTML，因此这是行不通的。我想我需要找到一种在我的 javascript 中设置它的方法，以某种方式引用当前页面/选项卡。
与此相关的是我如何在 .close div/link 的单击处理程序中更改当前页面绿叶的不透明度，即，如果在主页处于活动状态时关闭联系表单，则主页绿叶将淡入（因为它是当前页面），与“关于”页面相同。同样，我似乎需要找到一种在单击处理程序中引用当前页面/选项卡的方法。
有人可以帮我吗？
谢谢，
尼克
哇，这令人困惑， 看来你使情况过于复杂化了。 您不需要特定于页面的 CSS 或类似的东西。你只需要在不同的时间设置.current类即可。
当有人导航到您的网站时，您会知道他们正在加载什么#tag，或者是否没有。
现在，基本上在页面加载时，您需要查看主题标签，如果那里有一个主题标签并且它是正确的（即它是您所考虑的实际页面），那么您只需像现在一样加载该页面，但也要突出叶子。
您实际上可以简化 .current leaf 上的整个事情
实际上，当您加载信息时，“叶子”只是“当前”。因此，当信息加载并放置在 $wrapper 中时，会淡入并呈现动画；然后打开你的.current。
更新 - 快速解决方案
http://jsfiddle.net/6p2f6/1/
基本上，我将更改 .current 叶子的内容移至哈希更改中
在底部，我检查用户是否使用哈希导航到页面，如果没有，则设置默认值。
它并不完美，但这是我目前能做的最好的事情。
更新 - 新代码:)
http://www.mediafire.com/?51vajskfeu923
有一些文件，所以我无法将其放入 JSfiddle
是的，我无法让整个淡入淡出菜单正常工作，但我让它像正常的悬停一样显示/隐藏。我可以稍后再看，但既然你知道怎么做，我假设你能弄清楚。只需转到 javascript 文件并查找以下内容即可：
$this = $(this);
var currentHash = window.location.hash;
console.log('specialMenu this.each(this) = '+$this.attr('href'));
//append all images
$this.append('<img class="defaultImage" src="'+settings.defaultImage+'"/>')
.append('<img class="hoverImage" src="'+settings.hoverImage+'"/>')
.append('<img class="activeImage" src="'+settings.activeImage+'"/>');
//prepare positioning
$('.defaultImage').css({
'z-index':'1'
});
$('.activeImage').css({
'z-index':'2'
});
$('.hoverImage').css({
'z-index':'3'
});
//Make parent correct height
$this.height($this.find('img').height());
//check what hash value is loaded
if(currentHash == $this.attr('href')){
$this.find('img:not(.activeImage)').hide();
$this.find('img.activeImage').show();
}else{
$this.find('img:not(.defaultImage)').hide();
$this.find('img.defaultImage').show();
}
$(this).hover(function(){
currentHash = window.location.hash;
$(this).find('img:not(.hoverImage)').hide();
$(this).find('img.hoverImage').show();
},function(){
currentHash = window.location.hash;
if(currentHash == $(this).attr('href')){
$(this).find('img:not(.activeImage)').hide();
$(this).find('img.activeImage').show();
}else{
$(this).find('img:not(.defaultImage)').hide();
$(this).find('img.defaultImage').show();
}
});
});
},
现在在主页上进行设置，看看这段代码：
$('#contentContainer').jdAjaxContent({
'defaultPage': 'home',
'pathToLoadGif' : 'ajaxloading.gif'
});
$("#destroy").click(function(){
console.log('destroy.click');
$(this).jdAjaxContent('destroy');
});
//had to put this in its own window load, not sure why; weird bug
$(window).load(function(){
console.log('specialMenu.click');
$('a[href^=#]').jdAjaxContent('specialMenu',
{
'defaultImage': 'MenuIcons-01.png',
'hoverImage' : 'MenuIcons-02.png',
'activeImage' : 'MenuIcons-03.png'
});
});
忽略销毁位，这只会删除插件；拿出来。
您感兴趣的是
$('#contentContainer').jdAjaxContent({
'defaultPage': 'home',
'pathToLoadGif' : 'ajaxloading.gif'
});
$('#contentContainer') 是你的ajax加载到的容器
默认页面就是默认页面哈哈
pageToLoadGif 是通常显示的小加载 gif 的路径。
现在你还需要看看
$('a[href^=#]').jdAjaxContent('specialMenu',
{
'defaultImage': 'MenuIcons-01.png',
'hoverImage' : 'MenuIcons-02.png',
'activeImage' : 'MenuIcons-03.png'
});
这就是做你的小菜单的事情。 由于您有不同的图像，因此您需要单独处理每一张图像，如下所示：
$('a[href^=#]').each(function(){
$(this).jdAjaxContent('specialMenu',
{
'defaultImage': $(this).attr('defaultImage'),
'hoverImage' : '$(this).attr('hoverImage'),
'activeImage' : $(this).attr('activeImage')
});
});
然后你将defaultImage =“blah”放入你的中，这样它看起来像
还有
将所有“console.log”查找替换为“//console.log”，以便所有控制台内容不会出现在您的实际网站上。
我发现编写自己的ajax引擎非常有趣。
我认为你应该把它包起来
$(window).trigger('hashchange');
在就绪事件函数中
$(document).ready(function() {
$(window).trigger('hashchange');
});