创建和构建索引页面

Question

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

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

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

我的技能是HTML和Javascript。

请参阅以下屏幕截图。

Answer 1

当您点击菜单项时，您正在使用数据更新页面，但是当您直接转到该链接时，您只是获取数据。解决这个问题的一种方法是为页面提供通用元素，即。导航菜单，在一个javascript文件中，然后使用一个脚本标记，其中包含您在页面上所需的链接。

Answer 2

所以，因为我认为这对我的项目很好，有了可用的浏览器历史记录和可收藏的子页面，我昨天尝试了我对OP的评论。

步骤1：将导航栏中的锚点更改为：

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

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

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

第3步：创建一个函数，以监听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调用您的页面