Question

this page的导航栏中有三片叶子。每个叶子部分都是一个导航链接，由具有绝对定位和不同z索引的div类组成，这样我就可以在棕色的绿叶上淡出。

页面之间也有一个渐变过渡，它基于CSS tricks上的动态页面更改方法，它使用散列更改来更改页面。

您可以在this jsfiddle上看到与导航栏上的树叶淡化相关的所有代码（该脚本还包含页面之间过渡的代码）。

我正在努力的部分是如何引用当前页面的div类“.current”（其中包含淡入和淡出的绿叶）。我需要这样做，这样，当首次打开网站时，无论是在主页还是关于页面，当前页面的绿叶设置为不透明度：1，因为页面已加载（这是当用户点击页面加载它，但不是在页面首次加载时。）

我可以在CSS中为每个页面设置.current类的不透明度，但是使用hashchange方法，只更改#main-content的HTML，所以这不起作用。我认为我需要找到一种在我的javascript中设置它的方法，以某种方式引用当前页面/标签。

与此相关的是如何在.close div / link的单击处理程序中更改当前页面的绿叶的不透明度，即如果在主页处于活动状态时关闭联系表单，则主页为绿色leaf将淡入（因为它是当前页面），并且与about页面相同。同样，我似乎需要找到一种方法来引用点击处理程序中的当前页面/选项卡。

有人可以帮我这个吗？

谢谢，

尼克

Answer 1

哇这令人困惑，看起来你的情况太复杂了。你不需要特定于页面的CSS或类似的东西，你只需要在不同的时间设置.current类。

当有人导航到您的网站时，您会知道他们正在加载的#tag，或者是否有任何#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加载到的容器默认页面是默认页面ha
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”放在你的所以它看起来像

ALSO
在所有'console.log'上找到替换为'//console.log'，以便所有控制台内容都不会显示在您的实际网站上。

我希望这会有所帮助，我发现编写自己的ajax引擎非常有趣，如果您发现任何错误或需要更多帮助，只需发表评论或发送电子邮件至mr.jackdavis@gmail.com

Answer 2

我认为你应该包装

$(window).trigger('hashchange');

在就绪事件函数

中

$(document).ready(function() {
    $(window).trigger('hashchange');
});

使用jQuery将效果应用于当前页面/选项卡的div类

2 个答案: