Question

我制作了一个包含3个部分的小页面。虽然1节显示其他部分是隐藏的。页面加载时，将显示欢迎部分，而其他部分设置为display：none。单击其他页面的菜单按钮可显示所需的部分并隐藏所有其他部分;我正在使用jQuery来做到这一点。不幸的是，现在我遇到了一个问题，即我无法将网址转到特定部分。通常，要转到未隐藏的页面的一部分，我只需创建一个锚点，名称为XXX，然后在该页面的末尾添加#XXX，但在隐藏的div上执行此操作没有制作div节目。

有什么建议吗？

HTML：

<div id="menu">
    <p><a href="#" id="menu-home">Home</a></p>
    <p><a href="#" id="menu-page1">Page 1</a></p>
    <p><a href="#" id="menu-page2">Page 2</a></p>
</div>

<div id="home">
    <h1>Welcome!</h1>
    <p>This is where all the home page stuff will go</p>
</div>
<div id="page1">
    <h1>Page 1</h1>
    <p>Page 1 content here</p>
</div>
<div id="page2">
    <h1>Page 2</h1>
    <p>Page 2 content here</p>
</div>

的CSS：

#page1 {
    display:none;    
}
#page2 {
    display:none;
}

JS：

$(document).ready(function(){
    $('#menu-home).click(function(){
        $('#home').show('fast');
        $('#page1').hide('fast');
        $('#page2').hide('fast');
      });
    $('#menu-page1).click(function(){
        $('#page1').show('fast');
        $('#home').hide('fast');
        $('#page2').hide('fast');
      });
    $('#menu-page2).click(function(){
        $('#page2').show('fast');
        $('#home').hide('fast');
        $('#page1').hide('fast');
      });
});

Answer 1

您可以使用window.location.hash *，它将返回网址的相应部分。

为此，您应该为<a>标记提供一些正确的哈希值：

<p><a href="#page1" id="menu-page1">Page 1</a></p>
<p><a href="#page2" id="menu-page2">Page 2</a></p>

检查提到的字符串是否与给定页面匹配：

$(document).ready(function(){
    //binding click events to elements

    var locationHash = window.location.hash.substring(1);
    if(locationHash == 'page1'){
      $('#menu-page1').trigger('click');
    }else if(locationHash == 'page2'){
      $('#menu-page2').trigger('click');
    }
});

您看到我将点击事件用于快速快速解决方案，并且还使用location.hash取消#来摆脱Location。当然，这是有待改进的。例如。如果找到给定的哈希，则在页面加载时根本不隐藏page1或page2。

*请参阅Location的链接文档，因为window.location是一个hash对象，其中包含{{1}}属性

Answer 2

您需要一些javascript，在页面加载时，会检查#menu-xy等锚点的网址，并使相应的div可见。

如何使用url显示隐藏的div

2 个答案: