如何创建一个有多个页面的网站，用户可以访问而无需重新加载网页

Question

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

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

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

Answer 1

基本上你只是想分配每个"页"(这实际上只是div或类似的东西)一个id或类，然后在你的CSS文件中，设置他们每个显示:none。然后使用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时，显示/隐藏功能将正常工作

Answer 2

你几乎是在描述制表符。你可以使用jQuery UI选项卡:http://jqueryui.com/tabs/

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

Answer 3

有一个叫做JQuery Tools的JQuery插件，它为常见的网页设计功能提供了一个简单的界面，包括你需要的。具体来说，标签功能允许您在点击<ul>中的链接时加载某些<div>。从http://jquerytools.org/demos/tabs/index.html:

<!-- 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");
});

这将使ul.tabs中的所有链接导航到每个直接 div.panes的子div(因此> -确保它在那里，如果你想要)。

Answer 4

你也可以使用框架。一个网页可能包含多个框架，你也可以让其中一些不可见(包括一个开关)。查看此链接:http://www.pageresource.com/jscript/jframe1.htm