bootstrap如何实现左侧导航栏右侧网页

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

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

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

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

二者的实现方式：

采用iframe的话比较简单， <iframe id="iframe" name = "frame" src="${pageContext.request.contextPath}/user/render.do" width="100%" height="800px" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no" allowtransparency="yes"></iframe> 然后再写一个script函数： <script type="text/javascript">

var menuClick = function(menuUrl) {

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

};

</script>

再在<a href="#" onclick('${pageContext.request.contextPath}/user/renderr.do')></a>添加，就可以实现在左侧菜单点击，加载右边网页。

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

再看看用div的方式来做的话：首先定义一个div<div id="myManu" ></div>，然后再写一个script函数，<script type="text/javascript">

$(document).ready(function(){

//这是给div的一个初始页面

$("#myManu").load('${pageContext.request.contextPath}/user/render.do');

})

var menuClick = function(menuUrl) {

$("#myManu").load(menuUrl);

};

</script>

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

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

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

此方法我也用过 <div class="embed-responsive embed-responsive-16by9">

</div>

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

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

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

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

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

最后编辑于：2020.01.10 23:10:02