2

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

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

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

4

4 回答 4

4

基本上你只想为每个“页面”（实际上只是 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，显示/隐藏功能将正常工作。

于 2013-03-20T01:21:56.703 回答
2

你几乎在描述标签。您可以为此使用 jQuery UI 选项卡：http: //jqueryui.com/tabs/

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

于 2013-03-20T01:27:53.083 回答
1

有一个名为JQuery Tools的 JQuery 插件，它为常见的网页设计功能提供了一个简单的界面，包括您需要的功能。具体来说，选项卡功能允许您<div>在单击 a 中的链接时加载某些 's <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（因此>- 如果需要，请确保它在那里）。

于 2013-03-20T01:37:27.300 回答
0

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

于 2013-03-20T01:40:49.420 回答