Question

在我的一些页面上，我使用JQuery来显示和隐藏不同的内容部分而不刷新页面。有没有办法可以从全球导航链接到页面的特定部分？最终，我希望用户点击其他页面上的链接，然后跳回到其他页面上的某个部分。

我有一个我目前在这里的例子，http://jsfiddle.net/tjaymz/JUJf7/

<nav id="sideNav">
<ul class="noStyle">
    <li><a href="#" name="menu1">Line 1</a></li>
    <li><a href="#" name="menu2">Line 2</a></li>
    <li><a href="#" name="menu3">Line 3</a></li>
</ul>

<section id="page_menu1">
    <h1>Some Heading</h1>
    <p>FPO</p>
</section>

<section id="page_menu2" class="hidden">
    <h1>Heading 2</h1>
    <p>FPO</p>
</section>

<section id="page_menu3" class="hidden">
    <h1>Another one</h1>
    <p>FPO</p>
</section>

$(function(){
$("#main_content section:not(:first-child)").hide();  //hide all but first
$("#sideNav a").click(function () {
    $('#main_content section').hide('fast');
    $('#page_'+this.name).show('normal');
});});

使用此示例我需要从另一个页面链接到此示例中的“第2行”。

Answer 1

我相信您可以将锚点用于您要链接到的站点中的页面部分。将全局导航栏上的链接转到锚点，它应该可以正常工作。

Answer 2

两种方法：

写一点javascript，点击URI中某个参数指向的按钮。
分开您的网页。 Javascript很好但是如果你使用它太多，它可以限制可访问性，妨碍SEO，使链接变脆等等。如果您仍然喜欢javascript的感觉，那么当服务器收到data-remote请求时，您可以通过javascript，json或xml呈现这些单独的页面。在这种意义上使用AJAX很好，因为该站点将为每个用户保持运行，并且由于您的用户体验，您最终不会遇到无法预料的问题。

Answer 3

您可以在页面加载时查看url哈希。尝试以下几点：

$(function () {
    $("#main_content section").hide();

    var selected = $(window.location.hash);
    if (selected.length) {
        selected.show();
    } else {
        $("#main_content section:first-child").show();
    }
});

然后，如果用户在其网址中链接了#page_url1，那么该部分就会显示。

要获得更全面的解决方案，您可能需要查看类似jQuery UI Tabs的内容。

链接到我网站其他部分的网页板块

3 个答案: