多页网站如何转变单页模式？

Question

网站原本是多页结构的，现在想弄成单页结构，
现在是多页结构：左边一个导航，右边一个内容区。
想换成单页结构：就是点击导航，右边内容区动态加载以前对应的HTML

请问有什么思路？现在只做到了换HTML结构(ajax获取html，然后正则获取需要的片段)，还有的难点是不知道怎么在换内容时，执行对应的JS文件与CSS文件

求指导，简单说个思路，关键词什么的也行。

Answer 1

一般都是用框架写的，比如angular，在配置文件里写好每个页面对应的js和css，再配合路由，当跳转到某个页面时就会自动执行配置文件里对应的代码了。

'classaction':{
            path: [
                'classaction',
                'classaction/:classid',
                'classaction/:action/:id'
            ],
            viewUrl: 'class/classaction',
            scripts: [
                '/dist/js/core/utils.min',
                'class/classaction',
                '/assets/js/plugins/videoJs/5.4.5/video.min'
            ],
            styles:[
                'classaction'
            ]
        },

Answer 2

css:直接把url设置到link标签上插入head里面就可以加载.
js:需要通过ajax将js文件的内容读取过来再通过eval方法进行执行.

window['eval'].call(window, script)

或使用其他框架:

   $('#container').load('内部页面地址');

Answer 3

jquery 用 ajax 获取 html 时，也可以获得到 link 和 script 标签，然后添加到你需要的容器里就好了。
另外注意路径。

var $el = $(".panel"); // 你需要放的容器

$.ajax({
    type: "get",
    url: "a.html",
    success: function(html) {
        $el.html(html);
    },
    error: function() {
        //...
    }
});

直接在 a.html 里面放 script 标签和 link 标签就好了。