创建和构建索引页面答案

【问题标题】：Creating and structuring the index page创建和构建索引页面
【发布时间】：2015-01-06 15:15:53
【问题描述】：

我有一个测试网站www.lemonbrush.com 有两个菜单项“Home”和“About”。

当我们点击“About”菜单时，About 页面是动态加载的，这很棒，但是当我在地址栏中直接输入 About 页面的 url http://www.lemonbrush.com/about.html 时，我的整个计划是六个。

我需要一些关于如何构建和加载页面的指导，以便即使我们在地址栏中使用直接 URL 也能包含整个标题和导航。

我的技能是 HTML 和 Javascript。

请查看以下屏幕截图。

【问题讨论】：

我自己没有这样做过。但我建议不要将 url 更改为 /about.html，而是使用 js 位置哈希作为起点。像 mydomain.com#about 这样的东西，在你的 js 中，你可以通过哈希 onload 来决定要加载哪个页面......
@errand，谢谢你的回复，你能不能给我举个例子让我明白你的意思？
正如我已经说过的，还没有尝试过，但是请参阅w3schools.com/jsref/prop_loc_hash.asp 以了解哈希的解释。据我了解，您始终可以调用 index.html，但可以通过位置哈希添加子页面，例如 index.html#about 和在您的 js 中，您读取位置哈希来决定加载哪个页面。
ajaxpatterns.org/Unique_URLs - 我想，这也会有所帮助；）

标签： javascript php jquery html user-interface

【解决方案1】：

当您单击菜单项时，您正在使用数据更新页面，但当您直接访问链接时，您只是获取数据。解决此问题的一种方法是为页面设置通用元素，即。导航菜单，在 javascript 文件中，然后在页面上使用带有链接的脚本标记。

【讨论】：

【解决方案2】：

所以，因为我认为拥有可用的浏览器历史记录和可收藏的子页面对我的项目来说会很好，所以我昨天尝试了我的 OP cmets 的方法。

第 1 步：将导航栏中的锚点更改为类似内容：

<a href="#index">home</a>
<a href="#about">about</a>

需要说，它们不需要在同一个父元素内。这些链接可以在任何地方。

第 2 步：从脚本中删除点击处理程序，该处理程序会对导航栏点击做出反应！

第三步：创建一个函数，监听onhashchange事件。（这必须在主 html 页面上完成一次）

//create a function for the onhashchange event
window.onhashchange = function()
{
    //check if a location hash is used
    if(window.location.hash != null) 
    { 
        //store current location hash in a variable
        requestedPage = location.hash;
        //remove the '#' from the location hash value
        requestedPage = requestedPage.replace('#','');

        //load content from subpage into your content frame
        $('#contentFrame').load('./' + requestedPage + '.html', function( response, status, xhr ) 
        {
            //catch 'file not found' errors and load start page
            if ( status == "error" ) {
                $('#mainPanel').load('./start.html');
            }
        });
};

对于您的页面，您当然必须适应，使用正确的选择器和正确的文件名。

然后您将通过 www.mydomain.com 调用您的页面，并通过 www.mydomain.com/#subPage 调用每个子域

【讨论】：