logo标签列表

在不重新加载页面的情况下导航到新内容并更新地址栏。

javascripthtml
3

我正在使用Javascript来显示文档。首先，我隐藏已加载的内容。然后，如果用户按下按钮，与该按钮相关的文本将变为可见，同时隐藏其他文本。

目前，我的技术不会更改在地址栏中显示的URL。

我希望在用户单击其中一个内容显示按钮时更新地址栏。例如：

address.com/value_of_button

如果用户输入：

adress.com/a_value

我想改变与值相关联的div的显示方式。如何实现？

“Hashbang”（#!）技术曾经有一些追随者。 - Jared Farrish
一篇关于哈希URI的好文章，以及一些关于jQuery UI如何处理它的信息。 - Jared Farrish
使用JavaScript隐藏内容时要小心，它会导致内容“出现然后消失”，这对用户不是很友好。考虑使用CSS样式使元素不可见。 - Jeffrey Sweeney
2个回答
3

您可以始终使用哈希 URL，并设置 URL 如下：

function setHash(var hash) {
    window.location.hash = hash;
}

如果您想要获取链接中的哈希值以更新页面，可以使用以下类似代码：
function getHash() {
    return window.location.hash;
}

要更新页面，你可以像这样简单地使用if语句：

if(getHash() == "#main") {
    document.getElementById('content').innerHtml = "<p>Main content</p>";
}
0

我已经在去年某个时候用jQuery演示过这一点。当然，不使用jQuery也是可能的，但我会提供我创建的演示文稿。我也会将一个示例移植到常规JavaScript。

<html>
<head>
<style type="text/css">
.content {
    display: none;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
<script type="text/javascript">

$(document).ready(function(){
    $('#menu a').each(function(){
        id = $(this).attr('href');
        id = id.substring(id.lastIndexOf('/'));
        id = id.substring(0,id.indexOf('.'));
        $(this).attr('rel',id);
    });
    $('#home').show();
    $('#menu a').click(function(e){
        e.preventDefault();
        $('.content').hide();
        $('#'+$(this).attr('rel')).show();
        location.hash = '#!/'+$(this).attr('rel');
        return false;
    });
});

</script>
</head>
<body>
<div id="menu">
    <a href="home.html">Home</a> -
    <a href="one.html">One</a> -
    <a href="two.html">Two</a> -
    <a href="three.html">Three</a>
</div>
<div id="home" class="content">
    Home content.
</div>
<div id="one" class="content">
    One content.
</div>
<div id="two" class="content">
    Two content.
</div>
<div id="three" class="content">
    Three content.
</div>
</body>
</html>

编辑

承诺的DOM方法：

<html>
<head>
<style type="text/css">
.content {
    display: none;
}
</style>
<script type="text/javascript">

window.onload = function(){
    var links = document.getElementById('menu').getElementsByTagName('a'),
        divs = document.getElementsByTagName('div'),
        sections = [],
        id = '';

    for (var i = 0, size = divs.length; i < size; i++) {
        if (divs[i].className.indexOf('content') != -1) {
            sections.push(divs[i]);
        }
    }

    for (var i = 0, size = links.length; i < size; i++) {
        id = links[i].href;
        id = id.substring(id.lastIndexOf('/') + 1);
        id = id.substring(0,id.indexOf('.'));

        links[i].rel = id;

        links[i].onclick = function(e){
            e.preventDefault();

            for (var p = 0, sections_size = sections.length; p < sections_size; p++) {
                sections[p].style.display = 'none';
            }

            document.getElementById(this.rel).style.display = 'block';
            location.hash = '#!/' + this.rel;

            return false;
        }
    }

    document.getElementById('home').style.display = 'block';
};

</script>
</head>
<body>
<div id="menu">
    <a href="home.html">Home</a> -
    <a href="one.html">One</a> -
    <a href="two.html">Two</a> -
    <a href="three.html">Three</a>
</div>
<div id="home" class="content">
    Home content.
</div>
<div id="one" class="content">
    One content.
</div>
<div id="two" class="content">
    Two content.
</div>
<div id="three" class="content">
    Three content.
</div>
</body>
</html>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接