Question

我已经创建了一个包含所有项目的投资组合页面。这些项目只是悬停描述和按钮的图像。我打算在单击其中一个按钮时淡化整页覆盖，使用唯一ID来标识按下哪个按钮，以便覆盖JavaScript知道哪个覆盖为特定项目的淡入。我已经完成了前2个项目覆盖。

当特定叠加层淡入时，我将唯一ID添加到url，如下所示：test.com/projects#Unique_Id。当我关闭叠加层时，我会从网址中删除ID。我找到了一些JavaScript，这样当我点击浏览器历史记录后退按钮时，重新添加哈希网址，并且覆盖图再次淡入。我还使用了一个脚本来使哈希URL能够成为书签/直接链接。因此，如果页面重新加载，或者直接访问哈希URL，则覆盖将淡入。所有这些都可以按下。

但我正在努力将历史记录回fadeIn并使用多个叠加层添加书签fadeIn而不会产生任何干扰。

以下是我正在处理的页面：http://www.stuartnorman.co.nf/projects正如我所说，前两个项目图片只有叠加层。

第一个叠加效果与背面和书签也很好。但是当我尝试第二个叠加时，点击后退和书签直接链接都将淡入第一个叠加而不是第二个叠加。我知道为什么会这样，但我无法解决这个问题。

我已尝试搜索此问题，但我找不到它。我也尝试了几种解决方法，但它们不起作用。我也试过使用几个历史插件，但它们不能满足我的需求。

所以，请有人给我提供一些代码，这些代码可以让我在历史记录中有多个独特的叠加fadeIn，并将直接链接加入书签，将正确的叠加分配给唯一的哈希id URL。谢谢。

这是我的叠加层和哈希id的JavaScript：

//Overlay1 fadeIn on click with url hash id
$("#overlay1").click(function(event) {
    event.preventDefault();
    window.location.hash = this.hash;
    $(".overlay1").fadeIn(500);
    return false;
});
//Doesn't allow invisible clicks through to the parent div (stops overlay fadeOut with invisible clicking)
$('.innerContainer').click(function(e) {
  e.stopImmediatePropagation();
});
//Overlays fadeOut on click of the overlay div or the close button and completely removes the hash id from url
$(".close, .overlay1, .overlay2").click(function(event) {
    event.preventDefault();
    var isMSIE = /*@cc_on!@*/0;

if (isMSIE) { // IE-specific
  window.location.hash = ''; // for older browsers, leaves a # behind
} else { // non-IE
  history.pushState('', document.title, window.location.pathname); // deletes the #
}
    event.preventDefault();
    $(".overlay1, .overlay2").fadeOut(500);
});
//On history back, display the last hash id url, fadeIn overlay and hide body scroller
if (("onhashchange" in window) && !($.browser.msie)) {
        window.onhashchange = function () {
              $(".overlay1").fadeIn(500);
              $('body')
            .css('overflow', 'hidden');
         }
         }
//If a hash id is present in url, when refresh or bookmark link, allow the Overlay to fadeIn and hide body scroller         
if(window.location.hash) {
  $(".overlay1").fadeIn(500); 
        $('body')
            .css('overflow', 'hidden');
}
//Hides body scroller on click of overlay buttons
$(function() {
    $('#overlay1, #overlay2').click(function() {
        $('body')
            .css('overflow', 'hidden');
    });
//Shows body scroller on click of overlay close button or the body.
    $('body, .close').click(function() {
        $('body')
            .css('overflow', 'visible');
    });
});
//Overlay1 fadeIn on click with url hash id
$("#overlay2").click(function(event) {
    event.preventDefault();
    window.location.hash = this.hash;
    $(".overlay2").fadeIn(500);
    return false;
});

Answer 1

确定。没关系。我已经回答了我自己的问题。而不是使用此代码：

//On history back, display the last hash id url, fadeIn overlay and hide body scroller
if (("onhashchange" in window) && !($.browser.msie)) {
        window.onhashchange = function () {
              $(".overlay1").fadeIn(500);
              $('body')
            .css('overflow', 'hidden');
         }
         }
//If a hash id is present in url, when refresh or bookmark link, allow the Overlay to fadeIn and hide body scroller         
if(window.location.hash) {
  $(".overlay1").fadeIn(500); 
        $('body')
            .css('overflow', 'hidden');
}

我使用了这里找到的jQuery历史插件：http://tkyk.github.io/jquery-history-plugin 虽然它已经停产，但它仍然有效，并且是一段很棒的代码。

这是我使用该插件的新代码：

jQuery(document).ready(function($){
 //If no hash, start the page as normal. You would think you wouldn't need this, but you do.
    $.history.init(function(hash){
        if(hash == "") {
 //If hash = Hidden_Alphabet, then fadeIn .overlay1 and hide the body scroll.        
        } else if (hash == "Hidden_Alphabet") {
          $(".overlay1").fadeIn(500);
          $('body').css('overflow', 'hidden');
        } 
 //If hash = Type_as_Image, then fadeIn .overlay2 and hide the body scroll.
        else { window.location.hash == "Type_as_Image";
            $(".overlay2").fadeIn(500);
            $('body').css('overflow', 'hidden');
        }
    },
//This for some reason is also needed, and breaks the code if it's not there.
    { unescape: ",/" });
});

此代码将在单击后退按钮时使叠加显示为fadeIn，并且还会使用直接书签链接。目前，它仅使用2个叠加层。但我不知道更多。

<强>更新

要允许使用else if()和else，而不是使用if()和{{1}}，请使用{{1}}。这将使多个叠加工作，无论有多少叠加。

Div叠加在历史记录中显示fadeIn，并使用哈希网址添加书签

1 个答案: