JS+更改元素CSS+命名锚点

Question

我需要一些javascript方面的帮助，因为我完全是个新手。

基本上，我正在做的效果是有一个很好的着陆页，有几个链接，当链接被点击时，整个初始的"屏幕"应该滑到一边，变成一个侧菜单栏。

我走了那么远。我通过以下技巧做到了这一点：更改元素'；带有JavaScript 的s类

基本上，我用onclick-js操作更改div层的CSS类，并用CSS转换获得良好的滑动效果。

然而，这还不够。问题是，没有办法给某人一个直接链接到其中一个伪"子页面"。每次加载页面时，都会再次显示登录屏幕。我可以使用命名锚点来"激活"特定的div层。

但我不知道该怎么做。我必须根据访问页面的URL执行特定的javascript函数。。。嗯。。。这让我不知所措。

也许我一开始就把一切都安排错了？我不知道。。。我希望有人能帮忙（

这是我的jsfiddle：

http://jsfiddle.net/7hktzd44/8/

html:

<div id="overlay">
OVERLAY (menu)
<br /><br />
<a href="#one" id="link">link</a><br />
<a href="#two" id="linktwo">link2</a>
</div>
<div id="div1">
<a name="one" id="one"></a>
THIS IS LINK ONE DIV
</div>
<div id="div2">
<a name="two" id="two"></a>
THIS IS LINK TWO DIV
</div>

CSS：

body,html{
    margin: 0;
    padding: 0;
    background:#fff;
    color: #000;
}
#div1,
#div2{
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity 1s linear; 
    transition: opacity 1s linear;
    -moz-transition: opacity 1s linear;
    -o-transition: opacity 1s linear;
}
.visible{
    float: left;
    width: 65%;
    border: 1px solid #369;
    visibility: visible!important;
    filter:alpha(opacity=100)!important; /* For IE8 and earlier */
    opacity: 1!important;
    -webkit-transition: opacity 2s linear; 
    transition: opacity 2s linear;
    -moz-transition: opacity 2s linear;
    -o-transition: opacity 2s linear;
}
#overlay{
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background: #999;
    color: #fff;
    text-align: center;
    -webkit-transition: all 0.4s ease-in-out; 
    transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
}
.menu{
    width: 35%!important;
    position: fixed!important;
    top: 0;
    right: 0;
    background-color:#b9bcab;
    height: 100%;
    -webkit-transition: all 0.7s ease-in-out; 
    transition: all 0.7s ease-in-out;
    -moz-transition: all 0.7s ease-in-out;
    -o-transition: all 0.7s ease-in-out;
}

和JS:

function visibleone()
    {
        document.getElementById("overlay").className = "menu";
        document.getElementById("div1").className = "visible";
        document.getElementById("div2").className =
        document.getElementById("div2").className.replace
      ( /(?:^|s)visible(?!S)/g , '' )
    }
function visibletwo()
    {
        document.getElementById("overlay").className = "menu";
        document.getElementById("div2").className = "visible";
        document.getElementById("div1").className =
        document.getElementById("div1").className.replace
      ( /(?:^|s)visible(?!S)/g , '' )
    }

 window.onload = function()
    {
    document.getElementById("link").addEventListener( 'click' , visibleone );
    document.getElementById("linktwo").addEventListener( 'click' , visibletwo );
    }

Answer 1

我强烈建议您在处理哈希、历史和深度链接时使用jQuery。会省去你很多写作和麻烦！

这是一个关于代码笔的工作演示

http://codepen.io/anon/pen/ByVboZ

（jsfiddle不喜欢这个hashchange）

$(window).bind( 'hashchange', function(e) { 
      hash = location.hash;      
      $('#overlay').addClass('menu');
        $('.slide').removeClass('visible');
      $('.slide'+hash).addClass('visible');
});
if (window.location.hash) {
    $(window).trigger('hashchange')
}

Answer 2

您可以使用window.location.hash来获取片段标识符（hash#符号后的URL部分）。

然后给人们一个这样的链接：http://www.example.org/page.html#one

页面加载完成后，您可以打开右侧页面：

window.onload = function()
{
    document.getElementById("link").addEventListener( 'click' , visibleone );
    document.getElementById("linktwo").addEventListener( 'click' , visibletwo );
    // handle direct link to a page:
    if (window.location.hash == "#one") { visibleone(); }
    if (window.location.hash == "#two") { visibletwo(); }
}