0

在我的一些页面上，我使用 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 行”。

4

3 回答 3

0

您可以查看页面加载时的 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在他们的 url 中链接，该部分将可见。

要获得更全面的解决方案，您可能需要研究jQuery UI Tabs 之类的东西。

于 2013-02-14T21:39:52.683 回答
0

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

于 2013-02-14T20:41:24.497 回答
0

有两种方法可以做到这一点：

  1. 编写一点 javascript 来单击 URI 中某个参数指向的按钮。
  2. 分开你的页面。Javascript 很好，但如果你使用太多，它会限制可访问性、妨碍 SEO、使链接变脆等等。data-remote如果你仍然喜欢 javascript 的感觉，你可以在服务器收到请求时通过 javascript、json 或 xml 渲染这些单独的页面。从这个意义上说，使用 AJAX 是好的，因为该站点将继续为每个用户运行，并且您最终不会因为您的 UX 而遇到无法预料的问题。
于 2013-02-14T21:11:50.590 回答