javascript - JS + 改变元素 CSS + 命名 anchor

Question

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

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

我已经做到了。我通过使用这些技巧实现了它: Change an element's class with JavaScript

基本上，我使用 onclick js 操作更改了 div 层的 CSS 类，并通过 css 转换获得了很好的滑动效果。

然而，这还不够。问题是没有办法给某人直接链接到其中一个伪“子页面”。每次加载页面时，它都会再次显示登录屏幕。我也许可以使用命名 anchor 来“激活”特定的 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。将为您省去很多写作和麻烦!

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