css - 可以制作链接到离散 HTML 文件并且不会重新加载整个页面的选项卡吗？

Question

我需要链接到服务器上单独的 HTML 文件的菜单选项卡，并具有唯一的 URL。我知道这本身不需要 CSS，但我也想保留启用 Javascript 的菜单的“即时加载”效果，以及只加载页面的相关部分。（我认为，只有 CSS 的菜单会重新加载整个页面）。这可能吗？

Answer 1

您如何制作/样式菜单对单击后如何加载菜单中链接的页面没有任何影响。为了避免在单击时重新加载页面，您需要ajax向该页面发出请求并将其加载到当前页面中。

我建议使用jQuery 的 AJAX以避免跨浏览器问题。

例子：

$('#menu a').click(function(ev){
    $.ajax({
        url: "test.html",
        cache: false
    }).done(function( html ) {
        $("#results").append(html);
    });

    ev.preventDefalt();
});

Answer 2

在 Knockout.js 和/或 JQuery 的帮助下，这是可能的。

您可以使用 JQuery UI 提供的 Tabs 插件使用 JQuery完成所有操作。您必须编写所有自己的 CSS，这样您就不会获得默认的“选项卡式”外观，而是类似于菜单的外观。

或者，您可以使用Knockout.js创建一个客户端视图模型，其中包含一组绑定到您的菜单项的命令。然后，每个命令都会触发页面更新，最有可能使用 JQuery。

这是一个非常高级的示例，说明如何从基本菜单开始：

<ul>
 <li data-bind="menuOption1">
 ...
 </li>
</li>

一个 Knockout.js 视图模型

var MenuViewModel = function ()
{
  this.menuOption1 = function () {
    // TODO: show the discreet HTML page
  }
}

ko.applyBindings(new MenuViewModel());

如何实际显示页面取决于您。使用JQuery AJAX调用加载页面内容可能是最简单的。