Question

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

基本上我正在处理的效果是有一个很好的登陆页面，有几个链接，当点击链接时，整个初始“屏幕”应该滑到一边并成为侧面菜单栏。

我走得那么远。我通过使用这些提示实现了它： Change an element's class with JavaScript

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

然而，这还不够。问题是，没有办法让某人直接链接到其中一个伪“子页面”。每次加载页面时，它都会再次显示着陆屏幕。我可以使用命名锚点来“激活”特定的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

我强烈建议您在处理哈希和历史记录以及深层链接时使用jQuery。会为你节省大量的写作和麻烦！

这是一个关于codepen的工作演示

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

（jsfiddle并不喜欢哈希变换）

$(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获取片段标识符（哈希＃符号后面的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(); }
}

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

2 个答案: