方式一：采用iframe,即将网页放入iframe这个容器中。

方式二：采用div的话绑定a或者li的点击事件 阻止a的默认行为，用jquery的load()可以来加载这个div，即将网页放入div中。

方式三：angular的嵌套路由也可以实现。不过本人对angular不是很了解，所以这种方式没有去试。

方式四：采用ajax技术，实现局部刷新。(本人觉得该方式比较麻烦，就不在这细说了)。

二者的实现方式：

采用iframe的话比较简单， 然后再写一个script函数： 

var menuClick = function(menuUrl) {

$("#myManu").attr("src",menuUrl);

};

再在添加，就可以实现在左侧菜单点击，加载右边网页。

但是他有一个不好的地方就是，iframe的height要限定，这样的话对不同需求的页面来说就使得不能显示最佳效果。(而且iframe现在也是过时了)。

再看看用div的方式来做的话：首先定义一个div

采用该种方式的话就是代码量也很简洁，而且div会根据网页的内容来填充，就不需要将div的height定死，让其自动填充。使得每个网页的内容显示效果更好一点。但是它也有一个不好的方面，就是div的样式它受父级div的影响。不过你也可以对子级div进行自定义样式。

ps(个人觉得还是采用div的方式会好一点，毕竟页面的显示至关重要。)

还有就是bootstrap3.0中它有这个可以缩放的导航栏，具体使用情况可以去它官网查看文档。

此方法我也用过   

效果还是不错的。总之根据自己的需要选择不同的导航栏加载页面方式。

补充一点：用iframe做的话，iframe对应的网页是独立的，不受该页面的样式的影响。

用div做的话，div对应的网页不是独立的，它是嵌入当前页面的，所以div里面的样式会受父级div等的样式的影响。如果div的对应页面和当前页面的css或js都不影响的话，用jquery的load加载div会更好一点。

————————————————

原文链接：https://blog.csdn.net/lantingyue11/article/details/66475758