0

我一直在尝试使用 Jquery 作为站点导航的一种方式，但是在将页面引用附加到 url 时遇到了一些问题。在决定使用 Jquery 时，我有两个主要目标......

目标 1：我想要一个 index.html 页面，它使用 Jquery 在触发时隐藏和显示不同的元素（通过链接）。- 完成（过度设计......但仍然完成）。

目标 2：我还希望将这些不同的页面附加到 URL，以便它们可以直接链接到（或者当刷新发生时，它不会默认为初始页面）。

这是一个JSFiddle示例，显示了我当前如何为不同的页面实现我的 Jquery。我希望有人能够对我如何将页面（表示为多个 div）附加到 URL 提供一些见解。

我的代码示例：

HTML

<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
</head>


<div id="wrapper">

<div id="nav">
    <ul>
        <li><a href="#" id="projects-link">Projects</a></li>
        <li><a href="#" id="about-link">About</a></li>
        <li><a href="#" id="contact-link">Contact</a></li>

    </ul>


</div>


<div id="main-area">  


    <!-- Content 1 page -->    

    <div id="content-1" class="content-area">

    Content 1 - Main content


    </div>


    <!-- Content 2 page -->

    <div id="content-2" class="content-area">

        Content 2

    </div>


    <!-- Projects page -->
    <div id="projects" class="content-area">
        Projects
    </div>


    <!-- About page -->
    <div id="about" class="content-area">
        About
    </div>

    <!-- Contact page -->
    <div id="contact" class="content-area">
        Contact
    </div>



</div>

Javascript

$(document).ready(function() {
$(".content-area").hide();
$("#content-1").show();

$("#projects-link").click(function() {
    $(".content-area").hide();
    $("#projects").show();
});

$("#about-link").click(function() {
    $(".content-area").hide();
    $("#about").show();
});

$("#contact-link").click(function() {
    $(".content-area").hide();
    $("#contact").show();
});

});
4

2 回答 2

1

我建议稍微调整一下您处理整个场景的方式。首先，您已将链接全部设置为空哈希。将它们设置为您要显示的内容的 ID 怎么样？事实证明location.hash，一旦您这样做，将为您提供方便的选择器。您可以绑定到窗口的hashchange事件并在首次加载时手动触发它以显示您正在寻找的内容，如下所示：

$(window).on("hashchange", function(e) {
    $(location.hash.length > 1 ? location.hash : "#home").siblings().hide().end().show();
}).trigger("hashchange");

您会注意到，如果哈希实际上的长度比“#”长，我会尝试查找具有匹配 ID 的元素（否则我会找到 ID 为“home”的元素），隐藏其兄弟，然后显示请求的内容。

查看您的小提琴的这个分支，并注意锚点中 URL 的更改以及它们如何与您的内容元素的 ID 相关联。强制 hashchange 事件在页面加载时触发一次的好处是，如果有人在 处导航到页面index.html#contact，事件处理程序将立即评估并发现 ID 为“contact”的容器应该被显示。

于 2013-01-22T21:29:55.983 回答
0

对于 url 更改，请查看“location.hash”，您可以将其写入页面更改并在页面加载时阅读它也可以使用更改事件（或旧导航的计时器）检查它以管理上一个下一个按钮

对于您的 jquery 代码，请尝试将其编写得更全球化，例如：

$("#nav a").click(function(event)
{    var id = $(this).attr("id");
     var content = $("#content-"+id);
     $("#main-area > div").not(content).hide();
     content.show();
     event.preventDefault(); // no real click please
});

不要忘记 event.preventDefault，否则你的 location.hash 将被链接的 # 覆盖

于 2013-01-22T21:14:05.383 回答