Question

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

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

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

Answer 1

基本上你只想分配每个“页面”（实际上只是div或类似的东西）一个id或类，然后在你的CSS文件中，将它们中的每一个设置为display：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插件，它为常见的网页设计功能提供了一个简单的界面，包括你需要的东西。具体来说，Tabs功能可让您在点击<div>中的链接时加载某些<ul>。来自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>

您需要的唯一JavaScript是：

// 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> div.panes的每个div（因此> - 确保如果你想要那就在那里。

Answer 4

您也可以使用框架。一个网页可能包含多个框架，您也可以使其中一些框架不可见（包括一个开关）。请检查此链接：http://www.pageresource.com/jscript/jframe1.htm

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

4 个答案: