Javascript 如何创建一个包含多个页面的网站，用户无需重新加载页面即可访问该网站？

该网站非常简单，只包含4个页面，所有页面都使用相同的模板。我希望用户能够通过单击顶部的链接无缝浏览不同的页面，而无需重新加载任何内容

基本上，当用户第一次登陆网站时，应该加载整个网站。然后，在第一个页面完成加载后，用户可以单击顶部的任何链接，新网页将显示，而无需重新加载任何内容

---

我知道我应该使用Jquery或Javascript来实现这一点。我只是不确定Jquery/Javascript函数是做什么的。所有网页都非常简单和相似。

基本上，您只需要为每个“页面”（实际上是div或类似的内容）分配一个id或类，然后在CSS文件中，将每个页面设置为显示：无。然后使用jQuery的.show（）和.hide（）来显示或隐藏它们

更具体地说，您希望将一些处理程序绑定到导航，例如，对于主导航项：

$("#my-home-nav").click(function(){
    $("#my-home-div").show(); // or .fadeIn(), etc.
    $("#my-about-div").hide();
    $("#my-contact-div").hide();
});

如果有很多页面，上面的内容可能会使编写此类内容变得冗长，并且添加其他页面会有些困难。类似以下内容可能会使添加其他页面更容易：

var pageNames = ["home", "about", "contact"];
var namespace = "my";

var pages = pageNames.map(function(pageName) {
    return {
        nav: pageNameSelector(pageName, "nav"),
        div: pageNameSelector(pageName, "div")
    };
});

pages.forEach(function(page) {
    page.nav.click(function() {
        clearPages(pages);
        page.div.show();
    });
});

function pageNameSelector(pageName, type) {
    return $(["#" + namespace, pageName, type].join("-"));
}

function clearPages(pages) {
    pages.forEach(function(page) {
        page.div.hide();
    });
}

---

因此，您所要做的就是遵循相同的惯例来识别附加页面，其中nav/div的ID是像

NAMESPACE-PAGENAME-TYPE

一样给出的，并且当您向

pageNames

添加附加页面名时，显示/隐藏功能将正常工作。

您基本上是在描述选项卡。您可以为此使用jQuery UI选项卡：

---

或者你也可以滚动你自己的标签——隐藏内容，然后在点击链接时显示正确的内容，隐藏所有其他内容。我倾向于建立我自己的，因为我可以让它完全按照我想要的那样工作，而且它没有任何额外的开销“东西”，它不需要。如果您尝试了，但它不起作用，那么jQuery UI总是可以依靠的。

有一个名为gives的jQuery插件，它为常见的web设计功能提供了一个简单的界面，包括您需要的功能。具体而言，该功能允许您在单击

中的链接时加载某些

。发件人：

---

这将使

ul.tabs

中的所有链接导航到直接作为

div.panes

子项的每个div（因此

-如果需要，请确保它在那里）。

您也可以使用框架。一个网页可能包含多个框架，您还可以使其中一些框架不可见（包括开关）。检查此链接：

如果您知道这需要JavaScript来完成，为什么不搜索它并从那里开始呢？我不想使用AJAX。我也不知道该用谷歌搜索什么。我已经尝试过谷歌“加载多页javascript”，这似乎并没有完全解决我的问题。如果你知道我可以使用的更好的“谷歌”搜索词，请随意分享。感谢高级版。如果您不想使用为工作而构建的工具，您希望如何完成它？：访问此网站以了解ajax。如果没有某种片段标识符或历史操作，您将创建一个可访问性问题。如果我按下后退按钮，期望它返回到最后一个选项卡呢？如果我在其中一个选项卡上看到一些内容并尝试共享指向它的链接，该怎么办？

<!-- the tabs -->
<ul class="tabs">
    <li><a href="#">Tab 1</a></li>
    <li><a href="#">Tab 2</a></li>
    <li><a href="#">Tab 3</a></li>
</ul>

<!-- tab "panes" -->
<div class="panes">
    <div>First tab content. Tab contents are called "panes"</div>
    <div>Second tab content</div>
    <div>Third tab content</div>
</div>

// perform JavaScript after the document is scriptable.
$(function() {
    // setup ul.tabs to work as tabs for each div directly under div.panes
    $("ul.tabs").tabs("div.panes > div");
});