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

Question

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

基本上我正在处理的效果是有一个漂亮的着陆页，有几个 links，当 links 被点击时，整个初始 "screen"应该滑到一边，成为一个侧面菜单栏。

我到此为止了。我通过使用这些技巧实现了它： Change an element's class with JavaScript

基本上，我用 onclick js 动作改变 div 层的 CSS class，并通过 css 过渡获得很好的滑动效果。

然而，这还不够。问题是没有办法让某人直接 link 到伪 "sub-pages" 之一。每次加载页面时，它都会再次显示登录屏幕。我也许可以使用命名锚点，"activate" 一个特定的 div 层。

但我不知道该怎么做。我将不得不执行一个特定的 javascript 函数，具体取决于从中访问页面的 URL ......嗯......这是我无法理解的。

也许我一开始就把所有设置都搞错了？我不知道...我希望有人能提供帮助。 :(

这是我的 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

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

然后像这样给人们一个link：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(); }
}

Answer 2

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

这是 codepen 上的工作演示

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')
}

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

JS + changing element CSS + named anchors

javascript

css

navigation

anchor

singlepage