Javascript 创建和构造索引页

Javascript 创建和构造索引页,javascript,php,jquery,html,user-interface,Javascript,Php,Jquery,Html,User Interface,我有一个测试网站是有两个菜单项的家和关于 当我们点击About菜单时,About页面被动态加载,这很好,但是当我直接键入About页面的url时http://www.lemonbrush.com/about.html 进入地址栏,我的整个计划是六个月 我需要一些关于如何构建和加载页面的指导,以便即使在地址栏中使用直接URL时,也能包含整个标题和导航 我的技能是HTML和Javascript 请参见以下屏幕截图 当您单击菜单项时,您正在使用数据更新页面,但当您直接转到链接时,您只是在获取数据。解决

我有一个测试网站是有两个菜单项的家和关于

当我们点击About菜单时,About页面被动态加载,这很好,但是当我直接键入About页面的url时http://www.lemonbrush.com/about.html 进入地址栏,我的整个计划是六个月

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

我的技能是HTML和Javascript

请参见以下屏幕截图


当您单击菜单项时,您正在使用数据更新页面,但当您直接转到链接时,您只是在获取数据。解决这一问题的一种方法是在javascript文件中为页面提供公共元素,即导航菜单,然后使用脚本标记,并在页面上希望链接的位置使用该标记

因此,由于我认为拥有一个可用的浏览器历史记录和可设置书签的子页面对我的项目来说是件好事,所以昨天我从我对OP的评论中尝试了这种方法

步骤1:将导航栏中的锚更改为类似以下内容:

<a href="#index">home</a>
<a href="#about">about</a>
对于您的页面,您当然需要调整,使用正确的选择器和正确的文件名


然后,您可以通过www.mydomain.com调用您的页面,而通过www.mydomain.com/subPage调用的每个子域都不是我自己完成的。但是,我建议使用js位置哈希作为起点,而不是将url更改为/about.html。类似于mydomain.comabout的东西,在你的js中,你可以让hash onload来决定要加载哪个页面…@errad,谢谢你的回复,你能给我举个例子让我明白你的意思吗?正如我已经说过的,还没有尝试过,但请参阅以了解hash的解释。据我所知,您可以随时调用index.html,但可以通过位置散列添加子页面,如index.htmlabout,在js中,您可以读取位置散列来决定加载哪个页面我想,这也会有帮助;
//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');
            }
        });
};